css弹性布局

display：flex是一种弹性布局方式，意思是让盒子保持最大的灵活性，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

1.flex-direction属性

决定项目的方向,默认横向排列

属性值 描述
row 默认值，横向排列
row-reverse 横向排列，但与row相反
column 垂直排列
column-reserve 垂直排列，但与column相反

2.flex-wrap属性

flex-wrap 属性规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向，默认nowrap

属性值 描述
nowrap 元素不换行，例如，两个div设置宽为100%，但实际却是50%
wrap 元素换行，一个div宽为100%，第二个div就换行了
wrap-reverse 元素换行，但与wrap方向相反

3.flex-flow 属性

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

4.align-items属性

子元素在当前行的侧轴上的对齐方式

属性 描述
stretch 默认值
center 中间
flex-start 开头
flex-end 结尾
baseline 位于容器的基线上

5.justify-content属性

元素在横轴上的排列

属性值 描述
flex-start 默认值，位于元素的开头
flex-end 位于元素的结尾
center 位于元素的中心
space-between 所有子元素先两边贴边在平分剩余空间
space-around 位于它本身之前之后的留白之内，并按照比例排列

6.弹性子元素属性

(1).order

设置弹性盒子的子元素排列顺序。
<integer>：用整数值来定义排列顺序，数值小的排在前面。可以为负值，默认为0。

（2）.flex-grow属性

<integer>：一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。

(3).flex-shrink属性

<integer>：一个数字，规定项目将相对于其他灵活的项目进行收缩的量。默认值是 1。

(4). flex-basis属性

<integer>：一个长度单位或者一个百分比，规定元素的初始长度。
auto：默认值。长度等于元素的长度。如果该项目未指定长度，则长度将根据内容决定。

(5).flex属性

flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

(6).align-self属性
属性值 描述
auto 默认值
stretch 元素被拉伸以适应容器
center 元素位于容器之中
flex-start 元素位于容器的开头
flex-end 元素位于容器的末尾
baseline 元素位于容器的基线上
inherit 继承父元素的属性
initial 设置该属性为它的默认值 
著：此文有借鉴之处