flex布局
一、flex布局
布局的传统解决方案，基于盒模型，依赖 display 属性 + position属性 +float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。Flex布局相对于传统布局，可以简便、完整、响应式地实现各种页面布局,具有明显的优势
二、flex布局的属性
容器属性（给容器设置）
- flex-flow
- flex-direction
- flex-wrap
- justify-content
- align-items
- align-content
元素属性（给弹性元素设置）
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
三、flex弹性盒布局
采用 Flex 布局的元素，称为 Flex 容器，简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目，简称"项目"。
对于某个元素只要声明了display: flex;，那么这个元素就成为了弹性容器，具有flex弹性布局的特性。
关于主轴和交叉轴
- 每个弹性容器都有两根轴：主轴和交叉轴，两轴之间成90度关系。注意：水平的不一定就是主轴。
- 每根轴都有起点和终点，这对于元素的对齐非常重要。
- 弹性容器中的所有子元素称为<弹性元素>，弹性元素永远沿主轴排列。
- 弹性元素也可以通过display:flex设置为另一个弹性容器，形成嵌套关系。因此一个元素既可以是弹性容器也可以是弹性元素。
弹性容器的两根轴非常重要，所有属性都是作用于轴的。
1、主轴
flex布局是一种一维布局模型，一次只能处理一个维度（一行或者一列）上的元素布局。
也就是说，flex布局大部分的属性都是作用于主轴的，在交叉轴上很多时候只能被动地变化。
我们可以在弹性容器上通过flex-direction修改主轴的方向。如果主轴方向修改了，那么：
- 交叉轴就会相应地旋转90度。
- 弹性元素的排列方式也会发生改变，因为弹性元素永远沿主轴排列。
2、属性
flex-direction属性用来改变主轴的方向 取值：row(默认) | row-reverse | column | column-reverse
3、沿主轴的排列处理
弹性元素默认不换行，如果我们想要弹性元素换行，可以通过设置flex-wrap：wrap；使元素换行。
flex-wrap属性
用于控制项目是否换行 取值：nowrap(默认，不换行) | wrap（换行） | wrap-reverse
下列代码中，我们设置了弹性元素宽度为60px，容器宽度为300px，理论上一行放不下六个，但是使用flex布局，当容器宽度不够时，元素默认会被等比例压缩排放在一行上。
4、flex-flow属性
flex-flow属性是flex-deriction与flex-wrap属性的简写集合，默认属性为row nowrap，即横向排列，且不换行，如果需要控制项目排列与换行，推荐使用此属性，而非单独写两个。
5、设置元素在主轴方向的排列方式
justify-content属性
取值：flex-start(默认) | flex-end | center | space-between | space-around | space-evenly;
6、设置元素在交叉轴方向的排列方式
align-items属性
取值：flex-start | flex-end | center | baseline | stretch(默认，在没有设置高度的情况下)
