css弹性布局属性

css弹性布局属性：display、flex-direction、 justify-content、align-items 、flex-wrap

display

display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

flex-direction

flex-direction 属性指定了弹性子元素在父容器中的位置。

语法

flex-direction: row | row-reverse | column | column-reverse

justify-content

内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。

语法

justify-content: flex-start | flex-end | center | space-between | space-around

align-items

align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

语法

align-items: flex-start | flex-end | center 

flex-wrap

flex-wrap 属性用于指定弹性盒子的子元素换行方式。

语法

flex-wrap: nowrap|wrap|wrap-reverse

注意

块元素垂直居中问题采用 flex 解决。
行内元素垂直居中问题解决如下：

1. 单行
   该元素 css 属性 line-height 的值与该元素的父级元素 css 属性 height 一致即可。
2. 多行
   设置该元素 css 属性：display: table-cell; vertical-align: middle;，还需设置该元素的父级元素 css 属性：display: table;。