首先，生成输入框：
- 代码：
- 结果：
设置基本样式
包括：去除边距、设置父盒子的宽度(如果不设置宽度，会使用整个浏览器的宽度）、添加父盒子边框等
- 代码：
*{
margin: 0;
padding: 0;
}
#main{
width: 250px;
border: 1px solid #dcdcdc;
}
- 结果：
设置2个label标签的样式
- code：
#main label{
flex:1;
background-color: #f5f5f5;
font-family: "楷体";
text-align: center; /* 文本居中*/
}
flex:1： 即按照1：1的比例对剩余的空间进行放大或者缩小
- 结果：
调整第二个label标签的样式
由于前面设置label标签为flex布局，因此对第二个label标签进一步设置也只能用flex布局（注意选中的是第三个元素）
文章来源：https://www.toymoban.com/news/detail-406905.html
去除文本框的边框
点击文本框前：
点击文本框后，文本框内容框会有加粗的外框：
如果不想要，可以添加代码去掉：
文章来源地址https://www.toymoban.com/news/detail-406905.html
到了这里，关于flex布局：输入框布局demo的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
