flex布局：输入框布局demo_flex左右布局输入框

首先，生成输入框：

• 代码：
  
• 结果：
  

设置基本样式

包括：去除边距、设置父盒子的宽度(如果不设置宽度，会使用整个浏览器的宽度）、添加父盒子边框等

• 代码：

*{
	margin: 0;
	padding: 0;
}

#main{
	width: 250px;
	border: 1px solid #dcdcdc;
}
1
2
3
4
5
6
7
8
9

• 结果：
  

设置2个label标签的样式

• code：

#main label{
	flex:1;
	background-color: #f5f5f5;
	font-family: "楷体";
	text-align: center;   /* 文本居中*/
}
1
2
3
4
5
6

flex:1： 即按照1：1的比例对剩余的空间进行放大或者缩小

• 结果：
  

调整第二个label标签的样式

由于前面设置label标签为flex布局，因此对第二个label标签进一步设置也只能用flex布局（注意选中的是第三个元素）

去除文本框的边框

点击文本框前：

点击文本框后，文本框内容框会有加粗的外框：

如果不想要，可以添加代码去掉：