FlexFlexible Box 的缩写,意为 “弹性布局”,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。

flex

flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间
如果父元素不是弹性盒模型对象, flex 属性不起作用
设为Flex布局以后,子元素的float、clear和vertical-align属性将失效
1
2
3
4
<style type="text/css">
	.main{
		width : 500px;
		border : 1px solid #d1d1d1;
		text-align: center;
		margin: 30px 0;
		padding : 20px;
		display : flex;  /* 将容器设置为弹性盒子 */
		display: -webkit-flex;
		display: -ms-flexbox;
	}
	.main .child{
		flex: auto; /* 平分父元素容器的宽度 */
		-ms-flex: auto;
		-webkit-flex: auto;
		padding: 10px;
		border: 1px solid #d1d1d1;
		margin-bottom : 10px;
	}
</style>


<div class="main">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
</div>