css3弹性盒子模型（Flex）

CSS3 弹性盒子(Flex Box)

弹性盒子是 CSS3 的一种新的布局模式.，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

主轴：表示水平方向
侧轴（交叉轴、副轴）：表示垂直方向
弹性盒子（项目）：表示要操作的元素

设置弹性盒子
将父元素设置成弹性盒子容器
注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效
子元素默认为主轴方向显排列

两种方式
 display:flex;
  让块级元素并列，成为块级元素
  父元素本身的显示方式类似于display:block;
 display:inline-flex;
  让块级元素并列，成为行内块级元素
  父元素本身的显示方式类似于display:inline-block;
例1：

display:flex

css样式代码:

.box{
	/* 为了体现出设置弹性盒子的两种方式 ，不设置宽高*/
	/* width: 1000px;
	height: 400px; */
	border: 1px solid #000;
	
	display: flex;         /*父元素本身的显示方式类似于display:block;*/
}
/* 匹配div并带有id属性 属性值是以child开头的元素 */
div[id^="child"]{
	width: 200px;
	height: 200px;
}
#child1{
	background-color: #f00;
}
#child2{
	background-color: #0f0;
}
#child3{
	background-color: #00f;
}
#child4{
	background-color: #f0f;
}

html代码：

<div class="box">
	<div id="child1">child1</div>
	<div id="child2">child2</div>
	<div id="child3">child3</div>
	<div id="child4">child4</div>
</div>