flex布局
什么是Flex布局
flex布局表示弹性布局，为盒状模型提供最大的灵活性。
适用范围
任何一种元素都可以指定为flex布局
flex布局中的一些基本概念
容器和项目
-
什么叫容器
采用flex布局的元素被称作容器。 -
什么叫项目
在flex布局中的子元素被称作项目。
即父级元素采用flex布局，则父级元素为容器，全部子元素自动成为项目。
在容器中默认有水平的主轴和垂直的交叉轴，项目在容器中默认沿主轴排列
容器的一些属性
有六个常用属性设置在容器上，分别为：
1. flex-direction
作用：用于设置主轴的方向
可能值：
- row: 默认值，表示沿水平方向，由左到右。
- row-reverse ：表示沿水平方向，由右到左 。
- column：表示垂直方向，由上到下。
- column-reverse:表示垂直方向，由下到上。
2. flex-wrap
作用：用于设置当项目在容器中一行无法显示的时候如何处理。
可能值：
- nowrap：默认值，表示不换行。
说明：设置的项目的宽度就失效了，强行在一行显示 - wrap：正常换行，第一个位于第一行的第一个
- wrap-reverse：向上换行，第一行位于下方
3. flew-flow
作用：是简写属性，是flex-deriction和flex-wrap属性的简写，默认值为[row nowrap]。
4. justify-content
作用：用于设置项目在容器中的对齐方式。
可能值：
- flex-start：默认值，左对齐。
- flex-end：右对齐。
- center：居中对齐。
- space-between：两端对齐。
- space-around：每个项目两侧的间距相等。
5. align-items
作用：定义了项目在交叉轴上是如何对齐显示的
可能值:
- flex-start:交叉轴的起点对齐
- flex-end 交叉轴的终点对齐
- center 交叉轴居中对齐
- baseline 项目的第一行文字的基线对齐
- stretch：默认值：如果项目未设置高度或者高度为auto，将占满整个容器的高度
以上几个属性都是设置在容器上的
以下几个属性都是设置在项目上的
6. order
作用： 用于排序，设置在项目上面。默认值为零。数值越小在容器中越靠前。
7.flex-grow
作用： 定义了项目的放大比例，默认为0，0时，如果存在剩余空间也会放大。
8.flex-shrink
作用： 定义了项目的缩小比例，默认为1，空间不够时0不缩小；
9.flex-basic
作用： 定义了在分配之前，项目占主轴的空间；
10.flex
作用： 是一个简写属性，由flex-grow，flex-shrink，flex-basic组成，默认值是：0 1 auto；
11.align-self
作用：align-self属性表示当前项目可以和其他项目拥有不一样的对齐方式，用于覆盖align-items
使用时应该注意些什么？
如果是Webkit内核的浏览器，需要加上 -webkit 前缀
在父级元素设置为flex布局后，子元素的float、clear、vertical-align属性都将失效，所以在使用flex布局时，不应该先设置完子元素布局后再使用。
推荐阅读：
CSS布局盒子模型之定位属性（position)