Flex布局子元素对齐方式

display

---

display: flex | inline-flex ;

display确定是否启用flexbox布局，flexbox布局下的子元素无论是内联元素的还是块状元素都会flex流的布局方式进行空间分配

flexDirection

---

flexDirection: row | row-reverse | column | column-reverse;

用来声明主轴的方向和在主轴上排列的方向

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

flexWrap

---

flexWrap: nowrap | wrap | wrap-reverse;

flex-wrap属性定义如果主轴上不下如何换行。

values	description
nowrap（默认)	子元素以单行显示，在ltr下自左向右；在rtl下自右向左
wrap	子元素可以以多行显示，在ltr下自左向右；在rtl下自右向左
wrap-reverse	子元素可以以多行显示，与wrap相反

justifyContent

---

justifyContent: flex-start | flex-end | center | space-between | space-around;

主轴方向上的对齐方式

values	description
flex-start（默认）	子元素从一行的起始处开始放置
flex-end	子元素会从一行的结尾处开始放置
center	子元素会集中在一行的中央
space-between	子元素会被均匀的分布在行内，两端与父容器无间隙
space-around	子元素会均匀的按照等距离分布在一行

效果如下图

alignItems

---

alignItems: flex-start | flex-end | center | baseline | stretch;

与主轴垂直的方向成为侧轴，alignItems用来定义侧轴方向上的对齐方式

values	description
flex-start	子元素在侧轴起点边的外边距紧靠住该行在侧轴起始的边
flex-end	子元素在侧轴起点边的外边距紧靠改行在侧轴结尾的边
center	子元素会被放置在侧轴的中央
baseline	子元素会根据他们的基线对齐
stretch（默认）	在侧轴方向上拉伸子元素以致填充满flexbox容器。

效果如下图

alignContent

---

alignContent: flex-start | flex-end | center | space-between | space-around | stretch;

根据在侧轴上的额外空间来排列容器的行，alignContent与alignItems的作用类似，但是只对多行的flex布局才有效果，对单行布局没有效果

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

使用效果如下图

flexFlow

---

flexFlow: ‘flex-direction’ ‘flex-wrap’

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

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

flex

---

flex: flex-grow flex-shrink flex-basis;

flex属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性， 默认值分别是"0 1 auto"，其中第二个和第三个参数（flex-shrink、flex-basis）是可选参数

values	description
flex-grow	一个数字，规定项目将相对于其他灵活的项目进行扩展的量。 默认值 0
flex-shrink	一个数字，规定项目将相对于其他灵活的项目进行收缩的量。默认值 1
flex-basis	项目的长度。合法值：“auto”、“inherit” 或一个后跟 “%”、“px”、“em” 或任何其他长度单位的数字。默认值 auto

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

alignSelf

---

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

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