CSS 盒模型 vs Flex 布局
CSS 盒模型是网页设计的布局中经常用到的模型，很好的了解模型对网页的布局有非常大的帮助；CSS3 让网页能够符合多种平台，让网页更加的弹性推出了 Flex 布局。
盒模型
盒模型一直在网页设计中非常流行，现在的前端工程师对盒模型的了解程度越来越高，我们在重新回顾一下盒模型的精髓：
//CSS
.box {
height: 100px;
width: 100px;
margin: 20px;
padding: 10px;
border: 1px solid #000;
background-color: #ccc;
}
box-model.jpg
当然不同的 display 属性下的盒模型是不一样的，上图为display:block情况下的盒模型，当在display:inline、display:table-cell等情况下需要另外考虑。
flex
CSS3 新增了display:flex，它使得网页更加弹性适合各种不同的屏幕，它的思想是让容器有能力让其子项目能够改变其宽度、高度甚至是顺序，以最佳的方式填充可用空间，当然这种不可预知的布局会让页面缺乏灵活性。
概念
设置了display:flex的元素称为弹性容器，它的所有子元素将称为flex item（弹性项目）。注意：设置了 flex 布局以后，子元素的float、clear和vertical-align属性将失败。
flex-base.png
- main axis：水平轴主轴
- cross axis：垂直交叉轴
- main start：主轴的开始位置
- main end：主轴的结束位置
- cross start：交叉轴的开始位置
- cross end：交叉轴的结束位置
- main size：单个弹性项目占据的主轴
- cross size：单个弹性项目占据的交叉轴
容器的属性
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
flex-direction
它决定了主轴的方向，就是弹性项目的方向
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
flex-direction.png
flex-wrap
它来设置项目如何换行，默认情况下项目都在一条轴线上
.box {
flex-wrap: nowrap | wrap | wrap-reverse;
}
flex-wrap.png
flex-flow
它是flex-direction和flex-wrap的简写，默认值为：row nowrap
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}
justify-content
它来设置项目在主轴上的对齐方式
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
justify-content.png
align-items
它来设置项目在交叉轴上的对齐方式
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
align-items.png
align-content
它定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
弹性项目的属性
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
order
它是用来定义项目的排列顺序，数字越小，排列靠前，默认为0。
.item {
order: 1;
}
order.png
flex-grow
这个属性是用来设置项目的放大比例，默认为0，即如果存在剩余空间也不放大；如果说有的项目的flex-grow属性都为1，那么它们会均分剩余的空间，如果一个项目的flex-grow属性为2，其他项目都为1，则为2的占据的剩余空间将比其他项多一倍。
.item {
flex-grow: 1;
}
flex-grow.png
flex-shrink
这个属性是用来设置项目的缩小比例，默认1，如果空间不足，则该项目缩小；如果一个项目的flex-shrink的属性为0，其它为1，则空间不足时，前者不缩小。
.item {
flex-shrink: 1;
}
flex-shrink.png
flex-basis
这个属性定义了在分配多余空间前，项目占据的主轴空间，它的默认值为auto，即项目本来的大小。
.item {
flex-basis: 200px;
}
flex
它是属性flex-grow、flex-shrink和flex-basis的简写，默认值为0 1 auto，后两个属性为可选项。
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];
}
align-self
它是用来设置单个项目的在交叉轴上的对齐方式，它会覆盖align-items属性的值，默认值为auto，即继承了父级元素的align-items属性。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
align-self.png
