flex弹性布局

flex布局（弹性布局）

flex布局的原理：用盒装状模型提供最大的灵活性，任何一个容器都可以指定flex布局；通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。

1.常见父项属性6个：

（1）flex-direction：设置主轴的方向；属性值有row（默认值，从左到右）、row-reverse（从右到左）、column（从上到下）、column-reserve（从下到上）；我们的元素都是根据主轴来排列的。

（2）justify-content：设置主轴上的子元素排列方式；属性值有flex-start（默认值，从头部开始，如果主轴是x轴，则从左到右）、flex-end（从尾部开始排列）、center（从主轴居中对齐，如果主轴是x,则水平居中）、space-around（平分剩余空间）、space-between（先两边在平分中间）。

注意：使用本属性之前一定确定好主轴为那个。

（3）flex-wrap：设置元素是否换行，默认在一条线上，子元素不换行，如果装不开会缩小子元素的宽度放在父元素里面；属性值：wrap（换行）、nowrap（默认值，不换行）。

（4）algin-items：设置侧轴子元素的排列方式（单行），该属性是控制子元素在侧轴的排列方式，在子项单项使用；属性值：flex-start（默认值，从上到下）、flex-end（从下到上）、center（垂直居中）、stretch（拉伸，子盒子不要给高度）。盒子在页面垂直居中，水平居中，需要设置justify-content：center；algin-items:center二者缺一不可。

（5）algin-content：设置设置侧轴子元素的排列方式（多行），该属性是控制子元素在侧轴的排列方式，在子项多项使用，单行没有效果。属性值同上：space-around（子项在侧轴上平分剩余空间）、space-between （先两边在平分中间）。

（6）flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap属性。

flex布局子项常见属性

（1）flex子项目占份数，默认为0.

（2）algin-self控制子项自己在侧轴的排列方式。

（3）order定义项目的排列顺序，默认为0，-1比0小所以在前面。