flex属性

一、flex是什么

####flex是Flexible Box的缩写，意为“弹性布局”。它可以轻松实现元素框在容器中的自动伸缩效果，以适应容器的变化，非常适合移动端布局。
flex属于一维布局，项目只能沿着一个方向排列，要么是水平方向，要么是垂直方向。

二、flex属性分类

flex可以分为容器属性和项目属性。

1.容器属性

A. flex-direction:定义弹性盒子元素的排列方向,水平（行row)或者垂直(列column)。

下图分别为“flex-direction：rows”、”flex- direction:row-reverse”、”flex-direction:column”、”flex-direction:column-reverse”的运行效果。

B.flex-wrap:控制flex容器是单行或者多行,以及是否允许换行。

下图分别为“flex-wrap:nowarp”、“ flex-wrap:wrap”、 “flex-wrap:wrap-reverse”的运行效果。

C.flex-flow:设置或检索弹性框模型对象的子元素排列方式，是“flex-direction”、“flex-wrap”属性的简化。

运行效果如下图：

D.justify-content:设置或检索弹性框子元素在主轴（横轴）方向上的对齐方式。

运行效果如下图：

E.align-items:定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。

运行效果如下图：

F.align-content:在多行容器中，项目在交叉轴上的对齐方式。

运行效果如下图：

2.项目属性

A.flex-basis:用来指定伸缩基准值,即项目在分配主轴剩余空间之前, 项目所占据的主轴空间宽度。

运行效果如下图：

B.flex-grow:用来指定扩展比率。

运行效果如下图：

C.flex-shrink:用来指定收缩比率。

运行效果如下图：

D.flex:设置或检索弹性框模型对象的子元素如何分配空间。是“flex-basis”、“flex-grow”、“flex-shrink”三个属性的简写。

运行效果如下图：

E.align-self:定义flex子项单独在侧轴（纵轴）方向上的对齐方式。

运行效果如下图：

F.order:设置或检索弹性框模型对象的子元素出現的順序，默认值为0，值越小位置越靠前。

运行效果如下图：

三、总结

1.flex弹性布局的属性不多，根据字面意思就能充分理解记忆，但是多动手练习还是记忆代码的最好方式，起码代码运行后的效果会在你脑海里形成图像记忆，而图像记忆肯定比文字记忆更快速，也更持久。

2.“align-items”中不明白怎么把文字居中的格子的正中间，加了”text-align:center”没有效果。