Flexbox布局之对齐方式

display

display: flex | inline-flex;
是否使用flexbox方式布局

该属性是定义在弹性容器上的；根据其值决定是内联还是块布局。这时它的直属下级将会变成flex文档流。

flexDirection

flexDirection: row | row-reverse | column | column-reverse;
用来声明主轴的方向和在主轴上排列的方向

• row（默认）：在ltr排版方式下从左向右排列；在rtl排版方式下从右向左排列。
• row-reverse：与row排列方向相反，在ltr排版方式下从右向左排列；在rtl排版方式下从左向右排列。
• column：类似于row但是是顶部到底部
• column-reverse：类似于row-reverse但是是底部到顶部

justifyContent

justifyContent: flex-start | flex-end | center | space-between | space-around;
主轴方向上的对齐方式

• flex-start（默认）：子项会从一行的起始处开始放置
• flex-end：子项会从一行的结尾处开始放置
• center：子项会集中在一行的中央
• space-between：子项会被均匀的分布在行内；首项放置在一行的开始，尾项放置在一行的结束
• space-around：子项会均匀的按照同等距离分布在一行。需要注意的是，在视觉上会觉得并不等距，因为所有子项在两侧都需要加上同等的空间。首项会与容器开始边缘有一个单位空间的距离，但是与下一项会有两个单位空间的距离。

alignItems

alignItems: flex-start | flex-end | center | baseline | stretch;
侧轴方向的对齐方式

• flex-start：弹性项在侧轴起点边的外边距紧靠住该行在侧轴起始的边。
• flex-end：弹性项在侧轴起点边的外边距紧靠改行在侧轴结尾的边。
• center：弹性项会被放置在侧轴的中央。
• baseline：弹性项会根据他们的基线对齐。
• stretch（默认）：在侧轴方向上拉伸弹性项以致填充满弹性容器。（任遵从min-width/max-width）

flexWrap

flexWrap: nowrap | wrap | wrap-reverse;
默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

• nowrap（默认）：单行显示。在ltr排版下，项目自左向右；在rtl下，自右向左
• wrap：多行显示。在ltr排版下，项目自左向右；在rtl下，自右向左
• wrap-reverse：多行显示。方向与wrap相反

alignContent

alignContent: flex-start | flex-end | center | space-between | space-around | stretch;
根据在侧轴上的额外空间来排列容器的行
对于只有单行的弹性项来说是没有效果的。

• flex-start：行会紧靠容器的起始位
• flex-end：行紧靠容器的结束位
• center：行紧靠容器的中间位
• space-between：每行会均匀分布；首行在容器起始处而最后行在容器结束处
• space-around：每行根据相同的距离均匀的分布
• stretch（默认）：每行将会伸展以占用剩余的空间。

flexFlow

flexFlow: 'flex-direction' 'flex-wrap'

相当于同时设置两个属性：

flex-direction: row;
flex-wrap: wrap;

flex

flex-grow、flex-shrink和flex-basis三个属性的缩写，其中第二个和第三个参数（flex-shrink、flex-basis）是可选参数。默认值为“0 1 auto”。

宽度 ＝ 弹性宽度 * ( flexGrow / sum( flexGorw ) )

alignSelf

alignSelf: 'auto | flex-start | flex-end | center | baseline | stretch';

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。