flex布局,flex布局一行3个
flex弹性布局彻底掌握
flex布局又称为弹性布局，相对于更早出来的float浮动布局更加方便，在兼容性方面还有不足，但随着很多浏览器版本的淘汰，今后的flex布局会被更加广泛使用。在掌握flex布局前先认识两个概念。
1.flex container
2.flex items
如图所示：
flex布局包含两个重要的轴，main axis和cross axis，各自起点、终点分别对应strat和end。了解到flex布局的基本原型后，我们来看看其属性，属性又分为flex container的属性和flex items的属性，如下图：
默认情况下flex的排列方向为main start到main end，当切换到其他属性时：
flex-direction：row-reverse
flex-direction：column-reverse
1.2justify-content属性
justify-content属性表示flex items在main axis上的对齐方式，其值有center、flex-start、flex-end、space-between、space-around。
justify-content：center
justify-content：flex-end
justify-content：space-between
是每个items间隔相等
justify-content：space-around
items间的间隔是边缘间隔的两倍
1.3align-items
align-items属性决定了items在cross axis的对齐方式，属性值有stretch、flex-start、flex-end、center、baseline
stretch属性值为align-items的默认属性：当items在cross axis方向的size为auto时，会将其自动拉伸填充整个flex container，如：
align-items：flex-start
items与cross start对齐
1.4flex-wrap
flex-wrap属性是控制items换行的，其属性值有：nowwrap、wrap、wrap-reverse
flex-wrap：nowwrap默认值不换行，每个items会自动调整宽度填充完整个flex container
1.6align-content
align-content：flex-start（这就解决了上述中换行没有紧挨的问题）
align-content：flex-end
align-content：center
align-content：space-between（两端cross start 与cross end对齐）
align-content：space-around（与justify-content一样）
align-content：space-evenly
二、flex items上的css属性
2.1order
order属性决定items之间的排列的先后顺序，如图将原本排列的模块倒序排列如下所示，可知order越小排在越前。
2.3flex-grow
flex-grow属性用来对items的宽度进行放大，默认值为0，这里3个items的初始宽度为100px，离flex container边缘还有200px，当将3个items的flex-grow设置为1时，则每个items的宽度增加200px的三分之一，如：
弹性盒子flex布局
弹性盒子布局
div style="display: flex;flex-direction:row;justify-content:space-between "
1.flex-direction属性
取值：row(默认) | row-reverse | column | column-reverse
用于控制项目排列方向与顺序，默认row，即横向排列，项目排列顺序为正序1-2-3；row-reverse同为横向排列，但项目顺序为倒序3-2-1。
column 与row相反，为纵向排列，项目顺序为正序1-2-3，column-reverse同为纵向排列，项目顺序为倒序3-2-1。
取值：nowrap(默认) | wrap | wrap-reverse
用于控制项目是否换行，nowrap表示不换行；
举个例子：比如容器宽度为300px，容器中有6个宽度为60px的项目，nowrap情况下，项目会强行等分容器宽度从而不换行，那么项目实际宽度也就只有50px了，而非我们自己设置的60px。
wrap表示换行，即项目不会等分容器宽度，而是根据自身宽度进行排列，如果超出父容器宽度则自然换行。
wrap-reverse同样表示换行，需要注意的是第一排会紧贴容器底部，而不是我们想象的项目6紧贴容器顶部，效果与wrap相反。
flex-flow属性是flex-deriction与flex-wrap属性的简写集合，默认属性为row nowrap，即横向排列，且不换行，如果需要控制项目排列与换行，推荐使用此属性，而非单独写两个。
4.justify-content属性
取值：flex-start(默认) | flex-end | center | space-between | space-around | space-evenly;
用于控制项目在横轴的对齐方式，默认flex-start即左对齐，center 为居中，对应的flex-end为右对齐。
space-between为左右两端对齐，即左右两侧项目都紧贴容器，且项目之间间距相等。
space-around为项目之间间距为左右两侧项目到容器间距的2倍，比较特别的布局，日常使用不太多。
space-evenly为项目之间间距与项目与容器间距相等，相当于除去项目宽度，平均分配了剩余宽度作为项目左右margin。
** 5.align-items属性**
取值：flex-start | flex-end | center | baseline | stretch(默认)
用于控制项目在纵轴排列方式，默认stretch即如果项目没设置高度，或高度为auto，则占满整个容器，下面第一张图的项目没设置高度，其余图片中均为60px。
flex-start会让项目在纵轴紧贴容器顶部，flex-end与之相反：
center使用最多，自然不会陌生，在纵轴中心位置排列：
baseline比较特殊，它让项目以第一行文字的基线为参照进行排列：
注意，常理来说justify-content与align-items默认分别处理项目横轴，纵轴的对齐方式，但如果我们修改了flex-direction为column，它们处理的轴向会交换，也就是justify-content处理纵轴，align-items处理横轴。
6.align-content
取值：flex-start | flex-end | center | space-between | space-around | space-evenly | stretch(默认);
用于控制多行项目的对齐方式，如果项目只有一行则不会起作用；默认stretch，即在项目没设置高度，或高度为auto情况下让项目填满整个容器，与align-items类似。注意，如下演示的12个项目我均没有设置高度。
flex-start ，center，flex-end 与align-items属性表现一致：
space-around与justify-content保持一致，即项目之间间距为上下两端项目与容器间距两倍。
space-evenly同理，项目之间间距与项目到容器之间间距相等，space-between为上下两侧项目紧贴容器。
align-content其实也有baseline等其它可用值，表现与上面介绍过的属性一致，只是单行项目或多行项目的区别。
介绍完容器属性，简单介绍下项目属性。容器属性是加在容器上的，那么项目属性呢，就是写在项目上的，就好比容器属性给ul，项目属性给li差不多一个意思。
1.order
取值：默认0，用于决定项目排列顺序，数值越小，项目排列越靠前。
2.flex-grow
取值：默认0，用于决定项目在有剩余空间的情况下是否放大，默认不放大；注意，即便设置了固定宽度，也会放大。
假设默认三个项目中前两个个项目都是0，最后一个是1，最后的项目会沾满剩余所有空间。
假设只有第一个项目默认为0，后面两个项目flex-grow均为1，那么后两个项目平分剩余空间。
假设第一个项目默认为0，第二个项目为flex-grow:2，最后一个项目为1，则第二个项目在放大时所占空间是最后项目的两倍。
3.flex-shrink
取值：默认1，用于决定项目在空间不足时是否缩小，默认项目都是1，即空间不足时大家一起等比缩小；注意，即便设置了固定宽度，也会缩小。
但如果某个项目flex-shrink设置为0，则即便空间不够，自身也不缩小。
上图中第二个项目flex-shrink为0，所以自身不会缩小。
4.flex-basis
取值：默认auto，用于设置项目宽度，默认auto时，项目会保持默认宽度，或者以width为自身的宽度，但如果设置了flex-basis，权重会width属性高，因此会覆盖widtn属性。
上图中先设置了flex-basis属性，后设置了width属性，但宽度依旧以flex-basis属性为准。
5.flex
取值：默认0 1 auto，flex属性是flex-grow，flex-shrink与flex-basis三个属性的简写，用于定义项目放大，缩小与宽度。
该属性有两个快捷键值，分别是auto(1 1 auto)等分放大缩小，与none(0 0 auto)不放大不缩小。
6.align-self
取值：auto(默认) | flex-start | flex-end | center | baseline | stretch，表示继承父容器的align-items属性。如果没父元素，则默认stretch。
用于让个别项目拥有与其它项目不同的对齐方式，各值的表现与父容器的align-items属性完全一致。
ReactNative之Flex布局
一般使用ReactNative开发App,一般都采用Flex布局，使用这套布局就非常快。
Flex简介
Flex又叫弹性布局，会把当前组件看做一个容器，他的所有子组件都是他容器中的成员，通过Flex，就能迅速的布局容器中的成员。
使用场景：当想快速布局一个组件中所有子组件的时候，可以使用Flex布局
Flex主轴和侧轴
Flex中有两个主要的概念：主轴和侧轴
主轴与侧轴的关系：相互垂直的。
主轴：决定容器中子组件默认的布局方向：水平，垂直
侧轴：决定容器中子组件与主轴垂直的布局方向比如主轴水平，那么子组件默认就是水平布局排布，侧轴就是控制子组件在垂直方向的布局
flexDirection属性
flexDirection:决定主轴的方向，水平或者垂直，这样子组件就会水平排布或者垂直排布
flexDirection共有四个值，在RN中默认为column。
row（默认值）：主轴为水平方向，从左向右。依次排列row-reverse：主轴为水平方向，从右向左依次排列column：主轴为垂直方向，默认的排列方式，从上向下排列column-reverse：主轴为垂直方向，从下向上排列
使用 :
效果 ：
row
row.png
row-reverse
row-reverse.png
column
column.png
column-reverse
column-reverse .png
flexWrap属性
flexWrap:决定子控件在父视图内是否允许多行排列。
flexWrap共有两个值，默认为nowrap。
nowrap 组件只排列在一行上，可能导致溢出。wrap 组件在一行排列不下时，就进行多行排列
使用
效果
nowrap
nowrap.png
wrap
wrap.png
justifyContent
justifyContent:决定子组件在主轴中具体布局，是靠左，还是居中等
justifyContent共有五个值，默认为flex-start
flex-start: 子组件向主轴起点对齐，如果主轴水平，从左开始，主轴垂直，从上开始。flex-end 子组件向主轴终点对齐，如果主轴水平，从右开始，主轴垂直，从下开始。center 居中显示，注意：并不是让某一个子组件居中，而是整体有居中效果space-between 均匀分配,相邻元素间距离相同。每行第一个组件与行首对齐，每行最后一个组件与行尾对齐。space-around 均匀分配,相邻元素间距离相同。每行第一个组件到行首的距离和每行最后一个组件到行尾的距离将会是相邻元素之间距离的一半
使用
效果
flex-start
flex-start.png
flex-end
flex-end.png
center
center.png
space-between
space-between .png
space-around
space-around.png
alignItems
alignItems:决定子组件在测轴中具体布局一直都没有管过侧轴，如果侧轴垂直，决定子组件在上，还是下，或者居中
alignItems共有四个值，默认为stretch。
flex-start 子组件向侧轴起点对齐。flex-end 子组件向侧轴终点对齐。center 子组件在侧轴居中。stretch 子组件在侧轴方向被拉伸到与容器相同的高度或宽度。
使用
效果
flex-start
flex-start .png
flex-end
flex-end .png
center
center .png
stretch
stretch .png
alignSelf
alignSelf:自定义自己的侧轴布局，用于一个子组件设置。注意：当某个子组件不想参照默认的alignItems时，可以设置alignSelf，自定义自己的侧轴布局。
alignSelf共有五个值，默认为auto。
auto 继承它的父容器的alignItems属性。如果没有父容器则为 "stretch"flex-start 子组件向侧轴起点对齐。flex-end 子组件向侧轴终点对齐。center 子组件在侧轴居中。stretch 子组件在侧轴方向被拉伸到与容器相同的高度或宽度。
使用
效果
alignSelf.png
flex
flex: 决定子控件在主轴中占据几等分。
flex: 任意数字，所有子控件flex相加，自己flex占总共多少，就有多少宽度.
使用
export default class ReactDemo extends Component { render() { return ( View style={styles.rootView} Text style={[styles.text1Style,styles.baseTextStyle]}1/Text Text style={[styles.text2Style,styles.baseTextStyle]}2/Text Text style={[styles.text3Style,styles.baseTextStyle]}3/Text Text style={[styles.text4Style,styles.baseTextStyle]}4/Text /View ); }}const styles = StyleSheet.create({ rootView:{ backgroundColor:'darkorange', flex:1, flexDirection:'row', justifyContent:'space-around', alignItems:'center' }, baseTextStyle:{ // width:50, // height:50, fontSize:15, textAlign:'center', marginTop:20, }, text1Style:{ flex:1, backgroundColor:'red', }, text2Style:{ flex:1, backgroundColor:'deepskyblue', }, text3Style:{ flex:3, backgroundColor:'green' }, text4Style:{ flex:1, backgroundColor:'blue', }});
效果
flex.png
flex布局全解析
很长一段时间, 我知道有 flex 这个布局方式, 但是始终没有去学它. 3点原因:
最近由于开发需要, 学习了下WeUI的实现 , 发现里面大量使用了 flex 布局, 于是决定学习一下.
Flexbox Layout , 官方名为 CSS Flexible Box Layout Module , 意为"弹性布局", 是CSS3中引入的一种更加灵活高效的布局/对齐/排序方式(还有一种更适合大型布局的 网格布局 CSS Grid Layout Module ). flex 是 flexible 的缩写.
任何一个容器都可以指定为flex布局。
行内元素也可以使用flex布局。
采用flex布局的元素被称为 flex容器 (flex container) , 它的子元素即为 flex元素 (flex item) .
flex容器中包含两个相互垂直的轴, 即 主轴 (main axis) 和 副轴 (cross axis) .
flex元素沿主轴从 主轴起点 (main start) 到 主轴终点 (main end) 依次排布.
如果flex容器包含多行flex元素, 则 flex行 (flex lines) 沿副轴从 副轴起点 (cross start) 到 副轴终点 (cross end) 依次排布.
单个flex元素占据的主轴空间叫做 主轴长度 (main size) , 占据的副轴空间叫做 副轴长度 (cross size) .
Getting Dicey With Flexbox 中提到:
前一段时间同事做过 video 相关的开发, 踩到各种坑, 因此我知道 video 的支持不那么好, 特别是在Android上. 让我惊奇的是 flex 竟然比 video 的支持更好?
从 CanIUse 的数据来看, flex 的支持度是: 82.65% (支持) + 14.17% (部分支持) = 96.81% , 而 video 的支持度是: 92.48% . 浏览器对 flex 的支持好像并没有特别好...
但是有微信的WeUI使用了 flex 布局, 我觉得在移动端 flex 应该还是支持度比较高的.
所以, 如果你是做移动端开发的, 可以优先考虑 flex .
下面就开始介绍与 flex 布局相关的属性. 以作用对象分为两组, 第一组作用于flex容器, 第二组作用于flex元素.
注意: 以下属性值都可以有 initial (该属性的默认值)和 inherit (继承自父元素), 本处省略.
这类属性有6种, 分别为:
注意:
注意: row 和 row-reverse 受到了 direction 属性(默认值为 ltr , 可改为 rtl )的影响.
注意: 此属性只在flex容器中有 多行 flex元素时才有作用.
这类属性有6种, 分别为:
注意: flex元素的 float , clear 和 vertical-align 会失效.
当flex元素有父元素时, 它的 align-self: auto 即为父元素的 align-items 属性; 否则(无父元素时), 相当于 stretch .
当有剩余空间时, flex元素会根据 flex-grow 按比例分配剩余空间.
默认值 0 代表, 即使有剩余空间, 该flex元素也不放大.
当flex容器空间不足时, flex元素会根据 flex-shrink 按比例缩小.
flex-shrink 为 0 则表示, 即使flex容器空间不足, 该flex元素也不缩小.
flex-basis 定义了分配剩余空间之前flex元素的初始大小, 可为长度值(如 20% , 5rem 等)或 auto 等关键词.
flex-basis: auto 表示, 以 flex元素的主轴长度 为 flex-basis . 若flex元素的主轴长度也是 auto , 则以flex元素内容(即所有子元素)的大小为 flex-basis .
除了 auto 还有 content , max-content , min-content 和 fit-content 关键词, 但是现在浏览器对它们的支持太少, 可以忽略.
(敲黑板) 同学们注意, 这里是重点!
这里的 可选值 我参照了 W3C flexbox 的写法. 其中:
举例来说, a | [ b || c ] 包含的可能情况有 a , b , c , b c , c b .
现在回过头来再看 none | [ ‘flex-grow’ ‘flex-shrink’? || ‘flex-basis’ ] 就清晰多了.
注意, none 是一个特殊值, 相当于 0 0 auto .
另外, 如果 flex 中不指定:
注意: flex 的初始值是 0 1 auto , 即由每个 flex 因子本身的默认值组成(比方说 flex-grow 的默认值就是 0 ).
但是 , 如果利用 flex 设置了至少一个 flex 因子, 那么没被设置的那些 flex 因子的默认值(按grow, shrink, basis的顺序)分别是 1 1 0 .
我来举几个栗子.
W3C建议使用简写形式 flex , 因为它可以方便地应对下面4种 常见情况 .
自此, 我们已经知道了 flex-grow , flex-shrink 和 flex-basis 的作用. 根据这三个值, 计算flex元素的大小只需三步:
第一步: 计算元素的 flex-basis , 有两种情况: 1. 具体的长度值, 或, 2. auto (即flex元素的大小). (这里忽略了 content 等目前支持还不完善的关键词).
第二步: 计算剩余空间, 即 剩余空间 = flex容器的内部空间 - flex元素flex-basis值的总和 .
第三步: 按照 flex 因子(放大时为 flex-grow ; 缩小时为 flex-shrink )分配剩余空间到每个元素. flex元素的最终大小 = flex-basis - flex-factor * 剩余空间 .
举个栗子.
假设flex容器的内部空间为 200px , flex元素的大小的总和是 160px . 看起来, 还有 200 - 160 = 40px 的剩余空间, 应该放大flex元素, 是不是? 不一定! 要看它们的 flex-basis 总和.
假设它们的 flex-basis 总和是 300px , 那么剩余空间应该是 300 - 200 = -100px . 此时剩余空间是 负数 , 应该以 flex-shrink 对每个flex元素在 flex-basis 的基础上进行 缩小 .
下例中, 所有flex元素本身的大小为 80px , 元素中为 flex 值.
200px
0 1 auto
0 3 auto
0 1 150px
0 3 150px
125px
75px
你可以看到, 第一行的flex元素因为设置了 flex-basis:auto , 所以它们的 flex-basis 就相当于元素大小, 即 80px , 即 flex-basis 总和为 160px , 不足容器的 200px 空间, 此时应该放大元素. 但又由于元素的 flex-grow 为 0 , 所以每个元素分配到 0 * 40 = 0px 的剩余空间, 即不放大.
第二行的flex元素设置了 flex-basis:150px , 所以它们的 flex-basis 总和为 300px , 超过了容器的 200px 空间, 故按照 flex-shrink (比例为 1:3 )进行缩小. 由于剩余空间为 -100px , 所以第一个元素应缩小 25px 变成 125px , 第二个元素应缩小 75px 变成 75px .
绝对flex: 从0开始分配空间.
第一行中 flex-basis 为 0 , 表示每个flex元素的初始大小都视为 0 . 此时, 剩余空间就是"flex容器的大小".
相对flex: 从flex元素大小开始分配空间.
第二行中 flex-basis 为 auto , 表示每个flex元素的初始大小都是它本身的大小. 此时, 剩余空间就是"flex容器的大小 - flex元素大小的总和".
呃... flex的东西还是挺多的, 特别是 flex 因子相关的部分, 得花点儿时间理解.
但是, 我相信学flex是值得的, 谁用谁知道!
关于手机端的flex布局
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。
使用 flex 布局首先要设置父容器display: flex，然后再设置justify-content:center实现水平居中，最后设置align-items: center实现垂直居中。
ex：
运行结果：
justify-content和align-items是啥？哪里可以看出横向、竖向的语义？是的，flex 的确没有那么简单，这就要从两个基本概念说起了。
说来也不难，flex 的核心的概念就是容器和轴。容器包括外层的父容器和内层的子容器，轴包括主轴和交叉轴，可以说 flex 布局的全部特性都构建在这两个概念上。flex 布局涉及到 12 个 CSS 属性（不含display: flex），其中父容器、子容器各 6 个。不过常用的属性只有 4 个，父容器、子容器各 2 个，我们就先从常用的说起吧。
首先，我们先说说轴吧，理解了轴，在之后的例子中更更能理解属性。
如图所示，轴?包括?主轴?和?交叉轴，我们知道?justify-content?属性决定子容器沿主轴的排列方式，align-items?属性决定子容器沿着交叉轴的排列方式。那么轴本身又是怎样确定的呢？在 flex 布局中，flex-direction?属性决定主轴的方向，交叉轴的方向由主轴确定。
2.1主轴
主轴的起始端由flex-start表示，末尾段由flex-end表示。不同的主轴方向对应的起始端、末尾段的位置也不相同。
向右：flex-direction: row
向左：flex-direction: row-reverse
向下：flex-direction:column
向上：flex-direction:column-reverse
交叉轴
主轴沿逆时针方向旋转 90° 就得到了交叉轴，交叉轴的起始端和末尾段也由flex-start和flex-end表示。
上面介绍的几项属性是 flex 布局中最常用到的部分，一般来说可以满足大多数需求，如果实现复杂的布局还需要深入了解更多的属性。
容器具有这样的特点：父容器可以统一设置子容器的排列方式，子容器也可以单独设置自身的排列方式，如果两者同时设置，以子容器的设置为准。
设置子容器沿主轴排列：justify-content
justify-content属性用于定义如何沿着主轴方向排列子容器。
flex-start：起始端对齐，例子：
flex-end：尾端端对齐，例子：
center居中对齐：
space-around：子容器沿主轴均匀分布，位于首尾两端的子容器到父容器的距离是子容器间距的一半。
space-between：子容器沿主轴均匀分布，位于首尾两端的子容器与父容器相切。
设置子容器如何沿交叉轴排列：align-items
align-items属性用于定义如何沿着交叉轴方向分配子容器的间距。
flex-start：起始端对齐
flex-end：末尾端对齐
center：居中对齐
baseline：基线对齐，这里的baseline默认是指首行文字，即first baseline，所有子容器向基线对齐，交叉轴起点到元素基线距离最大的子容器将会与交叉轴起始端相切以确定基线。示例中我蓝色线标出来的为基线
stretch：子容器沿交叉轴方向的尺寸拉伸至与父容器一致。（在不给元素设置固定高的情况下）
在主轴上如何伸缩：flex
子容器是有弹性的（flex 即弹性），它们会自动填充剩余空间，子容器的伸缩比例由flex属性确定。
flex的值可以是无单位数字（如：1, 2, 3），也可以是有单位数字（如：15px，30px，60px），还可以是none关键字。子容器会按照flex定义的尺寸比例自动伸缩，如果取值为none则不伸缩。
虽然flex是多个属性的缩写，允许 1 - 3 个值连用，但通常用 1 个值就可以满足需求，它的全部写法可参考下图。
单独设置子容器如何沿交叉轴排列：align-self
每个子容器也可以单独定义沿交叉轴排列的方式，此属性的可选值与父容器?align-items?属性完全一致，如果两者同时设置则以子容器的?align-self?属性为准
flex-start：起始端对齐
flex-end：末尾端对齐
center：居中对齐
当然，baseline和stretch单独设置子容器的话，也是不受父容器影响的，在这就不举例子了。
目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
微信小程序flex布局
Flex布局：意为“弹性布局”，为盒模型提供巨大的灵活性
使用说明：
1. 任何容器都可以使用flex布局
??display: flex;
2.行内元素可以使用flex布局
??display: inline-flex;
外层flex容器的属性：
1.flex-direction属性
??flex-direction: row | row-reverse | column | column-reverse;
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
2.flex-wrap属性
?flex-wrap: nowrap | wrap | wrap-reverse;
nowrap (默认值) ：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。
3. flex-flow属性：是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
flex-flow: flex-direction || flex-wrap;
4. justify-content属性：定义item在主轴上的对齐方式
justify-content: flex-start | flex-end | center | space-between | space-around;
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
5. align-items属性：定义项目在交叉轴上如何对齐
align-items: flex-start | flex-end | center | baseline | stretch;
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
6. align-content属性：定义多跟轴线的对齐方式，如果只有一根轴线则不起作用
?align-content: flex-start | flex-end | center | space-between | space-around | stretch;
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。
项目item的属性
1. order属性：定义项目的排列顺序，数值越小越靠前，默认值为0，负数在0前面
order: integer;
2. flex-grow属性：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
?flex-grow: number; /* default 0 */
3. flex-shrink属性：定义项目缩小比例，默认是1，即如果空间不足，该item将缩小
?flex-shrink: number; /* default 1 */
4. flex-basis属性：在分配多余空间之前，item占据的主轴空间（main size），默认值auto，即item本身大小
flex-basis: length | auto; /* default auto */
5. flex属性：是flex-grow，flex-shrink，flex-basis的简写，默认值为0 1 auto，后面两个属性可选
?flex: none | [ 'flex-grow' 'flex-shrink'? || 'flex-basis' ]
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
6. align-self属性：允许单个item与其他item有不一样的对其方式，可覆盖align-items属性
align-self: auto | flex-start | flex-end | center | baseline | stretch;