flex页面布局案例(flex常见的布局方式)
CSS布局 + Flex布局
我们只会用到一点点儿CSS布局的属性，虽然少，但既然要用到，就得把它们总结在这里，搞明白。
在了解CSS布局的相关属性之前，我们先了解一下 盒子模型——CSS会把每个组件都看作是一个盒子，每个盒子从内往外有三个部分：
组件的宽度和高度决定了它在屏幕上显示的尺寸，一个组件的宽度和高度就是它 外边框所包围矩形 的宽度和高度，iOS里也是这样的。
我们可以通过 width 和 height 属性给一个组件设置固定的宽度，不过需要注意 这两个属性只能接收数值，不能带单位，这是因为RN要自己去适配安卓和iOS的单位。
在RN里，我们想让一个组件自适应宽高，要分两步。 首先我们要让该组件撑满它的父视图，即如果我们想自适应宽度，就得先让子视图的宽度撑满它父视图的宽度，如果我们想自适应高度，就得先让子视图撑满它父视图的高度，如果我们宽度和高度都想自适应，就得先让子视图把它父视图的宽度和高度都撑满。然后才能像我们iOS里使用Masonry那样，通过给组件添加上边距、左边距、下边距、右边距等约束来实现宽度和高度的自适应。
这里再对第一步做个解释， item的 flex: 1 属性可以让item在主轴上撑满它的容器，容器的 alignItems: 'stretch' 属性 + item在侧轴上不设置空间可以让item在侧轴上撑满它的容器。 好像有点不明白是吧，我们再通过一个例子来说得明了点，RN里不是默认主轴为竖向、侧轴为横向嘛，我们就采取这个默认状态来举例子。 在RN里，默认主轴为竖向、侧轴为横向的状态下，如果我们想让某个组件自适应高度，就得首先在它自身上设置 flex: 1 属性，来让它的高度撑满它的父视图；如果我们想让某个组件自适应宽度，就得首先在它父视图身上设置 alignItems: 'stretch' 属性（当然默认就是这个值），这还不够，你还得确保不给这个组件设置 width 属性或者 width 属性的值设为 auto ；如果我们想让一个组件自适应宽高，则两者都得做。 当然，如果我们设置了主轴为横向、侧轴为竖向，其实也是一样的道理，自己捋一下就知道怎么做了。如果还是看不懂的话，没有关系，下面我们会详细谈到这几个属性，等你学了这几个属性，反过头来看这里就明白了。
Flex是Flexible Box的缩写，可译为灵活的、有弹性的盒子。那Flex布局就是Flexible Box布局的缩写，就译为弹性盒子布局，用来对一个盒子进行灵活的布局。
在了解Flex布局之前，我们得先了解一下Flex布局里的两对儿 重要的 概念。
采用Flex布局的组件，被称为Flex容器（flex container），简称容器（container）。
这个组件上的子组件，被称为Flex项目（flex item），简称item（项目）。
我们可以把容器和item看做是父视图和子视图的关系， 因此下文中的容器、父组件、父视图将是一样的概念，item、组件、子视图将是一样的概念，组件和视图将是一样的概念。
每个容器都有两根轴，一个是 主轴， 一个是 侧轴 。
容器里众多的 item自动沿主轴进行排列。
一个item在主轴方向上所占据的空间称为 main size ，一个item在侧轴方向上所占据的空间称为 cross size 。
RN里主轴的默认方向为竖向，侧轴为横向。 浏览器里主轴的默认方向为横向，侧轴为竖向，下面我们讲Flex布局的属性时会采用浏览器的状态，学会后对应到RN里，换个主轴方向就可以了。
用在容器上的属性，最常用的有 5个 ， 而且这些属性还都不是从来设置容器自己的布局，而是用来设置容器里item的布局。
flex-direction 属性用来设置主轴的方向，即容器里item自动排列的方向。 在浏览器里，主轴的方向默认为横向，所以 flex-direction 属性的默认值为 row 。
它有4种取值。
justify-content 属性用来设置item在主轴上的对齐方式。
它有5种取值。
align-items 属性用来设置item在侧轴上的对齐方式。
它有5种取值。
默认情况下，一个容器只有一条主轴，所有的item都会沿着这条主轴自动排列下去，但是如果item太多了，一个屏幕长度的主轴根本串儿不下这么多item，那后面的item就会溢出屏幕，而界面还不是 ScrollView ，不能滚动，怎么办呢？
flex-wrap 属性用来设置换行，即当容器主轴上显示不下那么多的item时，我们可以让item换行来显示，并且一旦设置了换行，那么这个容器就不再是一条主轴了，而是会有多条平行的主轴。
它有3种取值。
align-content 属性用来设置多条主轴的对齐方式， 如果项目只有一根轴线，该属性不起作用， 即 align-content 属性要基于 flex-wrap 属性设置了换行才有使用的意义。
它有6种取值。
用在item上的属性，最常用的有 2个 ， 这些属性都是用来设置item自己的布局。
在第1小节容器的属性，我们已经通过 align-items 属性统一设置了容器里item在侧轴上的对齐方式，但如果其中某个item不想遵循这个对齐方式怎么办呢？我们会常见到这种场景，10个里有8个item是一样的对齐方式，就有1、2个item特立独行，那我们就得用item自己的 align-self 属性来单独给它们设置对齐方式了。
align-self 属性用来设置单个item在侧轴上的对齐方式， 注意是给特立独行的单个item设置哦，而且是侧轴，它会覆盖它容器的 align-items 属性，当然如果不设置这个属性，默认值就为 auto ，即item会默认使用容器的 align-items 属性给它设置的对齐方式。
它有6种取值，除了 auto ，其他都与 align-items 属性完全一致。怎么说呢，item的 align-self 属性似乎是用来造反的，反抗它容器的 align-items 属性。
flex 属性接收一个整数值， flex 属性描述起来太麻烦了，可以自行去搜索加深理解，我这里只列举出它的用途及注意事项。
（1） flex 属性有三个用途
（2）使用 flex 属性需注意
iOS里怎么使用Masonry布局的，RN里就怎么使用 Flex布局+CSS布局 来做布局就行了，它们布局的思路是一样的， 一个组件也同样至少需要四个约束。
当然，它们之间有一个极其细小的差别，那就是：上面提到的“RN里组件自适应宽高分两步”，而iOS里Masonry才不管你什么撑满不撑满呢。
当然，它们之间有一个极其巨大的差别，那就是：iOS里是没有主轴和侧轴之分的，你可以在一个父视图上横向、竖向同时放控件，并同时完成横向和竖向的布局。但RN里有主轴和侧轴之分，我们添加的组件只会沿着主轴排列，不可能同时出现横向和竖向排列，并且布局的时候也只能是沿着主轴布局，不可能同时完成两个方向的布局。
下面我们就通过几个小练习，来对比一下Masonry布局和Flex布局+CSS布局的思路，加深对RN里怎么布局组件的理解。
Masonry：
Flex布局+CSS布局：
Masonry：
Flex布局+CSS布局：
Masonry：
Flex布局+CSS布局：
Masonry：
Flex布局+CSS布局：
参考博客：
阮一峰的《Flex布局：语法篇》
阮一峰的《Flex布局：实例篇》
flex布局，看完这篇都懂了
flex布局
开启flex布局
display:flex (独占一行)
inline-flex(允许换行)
应用在flex container上的css属性
应用在flex items上的css属性
flex container的属性:
justify-content: 决定了 flex items在主轴(main axis)上的对齐方式
flex-start(默认值):与main start 对齐
flex-end:与main end 对齐
center:居中对齐
space-between: flex items之间的距离相等. 与main start,mian end两端对齐
space-evenly:flex items之间的距离相等. item与mian start,mian end之间的距离等于flex item之间的距离
space-around: flex items之间的具体相等
align-items 决定了flex item在cross axis上的对齐方式
flex-wrap 决定了单行还是多行
flex-flow是 flex-direction || flex-warp的缩写
flex-flow: row-reverse 等价于
flex-direction:row-reverse
flex-wrap:nowrap
align-content 决定了多行flex items在cross axis 上的对齐方式,用法和justify-content类似
stretch(默认值):与align-items的stretch类似 在cross axis上拉伸
flex-start:与cross start对齐
flex-end:与cross end对齐
center:居中对齐
align-self flex items可以通过设置align-self覆盖flex container设置align-items
auto(默认值):遵从flex container的align-items
stretch,flex-start,flex-end,center,baseline效果跟align-items一致
flex-shrink 决定了flex items如何收缩
可以设置任意非负数字(正小数,正整数,0),默认值是1
当flex items在main axis方向上超过了flex container的size,flex-shrink属性才会有效
每个flex item收缩的size为
flex items超出flex container的size * 收缩比例/所有flex items的收缩比例之和
收缩比例 = flex - shrink * flex item的base size
base size 就是flex item 放入flex container之前的size
flex items收缩后的最终size不能小于 min-width\min-height
flex-grow 决定了flex items如何扩展
可以设置任意非负数字(正小数,正整数,0),默认值是0
放flex container 在main axis 方向上有剩余size时,flex-grow属性才会有效
如果所有flex items的flex-grow综合sum超过1,每个flex item扩展的size为 flex container的剩余size * flex-grow/sum
如果所有flex items的flex-grow综合不超过1,每个flex item扩展的size为
flex container 的剩余size * flex-grow
flex items 扩展后的最终size不能超过max-width\max-height
举例:flex-direction为row的情况下 父容器宽度 400px 有三个子容器宽度均为100,
flex-grow分别为1,2,3
这样可以得出
A的宽度= 100 * (1/6) + 100 = 116.66
B的宽度 = 100 * (2/6) + 100 = 133.33
C的宽度 = 100 * (3/6) + 100 = 150
若 flex-grow分别为 0.1 ,0.2,0.3,则结果为:
A的宽度= 100 * 0.1 + 100 = 110
B的宽度 = 100 * 0.2 + 100 = 120
C的宽度 = 100 * 0.3 + 100 = 130
flex-shrink 决定了 flex items 如何收缩
可以设置任意非负数组(正小数,正整数,0),默认值是1
当flex items在main axis方向上超过了flex container 的size,flex-shrink属性才会有效
每个flex item 收缩的size为
flex items超出flex container 的size * 收缩比例/所有flex items的收缩比例之和
收缩比例 = flex-shrink * flex item的base size
base size就是flex item 放入 flex container之前的size
flex item收缩后的最终size不能小于min-width\min-height
举例:总容器宽度 500px 一共六个子视图,
宽度分别为110,120,130,140,150,160,
shrink为1,2,3,4,5,6,
总长度:110+120+130+140+150+160 = 810
总共得收缩的长度:810 - 500 = 310
收缩比例 是 flex-shrink * item的 主轴方向的size
sum = 110 * 1 + 120 * 2 + 130 * 3 + 140 * 4 + 150 * 5+ 160 * 6
item1的收缩比例是 110 * 1 需要收缩的具体为 310 * (110 * 1)/sum
item2的收缩比例是 120 * 1 需要收缩的具体为 310 * (120 * 2)/sum
item3的收缩比例是 130 * 1 需要收缩的具体为 310 * (130 * 3)/sum
item4的收缩比例是 140 * 1 需要收缩的具体为 310 * (140 * 4)/sum
item5的收缩比例是 150 * 1 需要收缩的具体为 310 * (150 * 5)/sum
item6的收缩比例是 160 * 1 需要收缩的具体为 310 * (160 * 6)/sum
flex-basis
设置flex items在 main axis方向的base size
auto(默认值) content 取决于内容本身的size
决定flex-item最终base size 的因素 优先级从高到低
max-width max-height min-width min-height
flex-basis
width height
内容本身的size
flex-basis 0
flex-group 1
联合使用的效果:
flex是flex-grow flex- shrink? || flex-basis
默认值是0 1 auto
none: 0 0 auto
css基础之flex布局
很多时候跟着书和不系统的视频学习，会发现没有方向，学了很多却不知道自己能够做出什么成绩。
学习要有一个清晰的职业学习规划，学习过程中会遇到很多问题，你可以到我们的web学习交流君羊- 点击此处 ，
同时准备了基础，进阶学习资料。学友都会在里面交流，分享一些学习的方法和需要注意的小细节，每天也会准时讲一些项目实战案例。
————————————————
1.什么是flex
flex 是 Flexible Box 的缩写,意为 弹性布局
flex布局中把一个元素作为容器，容器中的子元素称为项目
可以通过容器的flex属性，设置所有项目的排列样式。也可以通过项目的flex属性，设置指定项目的排列样式。
2.flex布局的方向
flex布局项目的排列方向可以有两个维度，一水平，二垂直
项目排列方向称为主轴，与主轴垂直的方向叫交叉轴
在每个轴上有两个方向，从左至右，从右到左；从上到下，从下到上。
2.1 flex水平布局
在水平维度，默认方向是从左至右
可以通过?flex-direction：row-reverse设置为从右到左排列
效果图：
1).默认方向,从左至右
2).反方向
2.2 垂直布局
效果图：
1).默认方向，从上到下
2).反方向
3. 容器内项目换行
通过flex-wrap属性，设置项目在容器内是否可以换行，默认不允许换行。
不换行的称为单行容器，换行的称为多行容器
也可以通过flex-flow属性同时设置容器主轴方向和是否换行（推荐使用）
效果图：
1).默认不允许换行，项目被压缩
2).允许换行，当剩余宽度不足容纳一个项目块时，就换行
相关知识：
css如何实现边框长度控制功能
详细介绍css中的数学表达式calc()
关于书籍：需要学习资料的小伙伴们可以加群， 点击此处
flex弹性布局
弹性布局可以响应式的实现各种页面布局，所有浏览器都支持。
让所有的li在ul当中垂直居中，实现如下：
效果如下：
接下来再细聊每个属性的特性。
任何一个容器都能使用flex布局，这里有一个flex-container的概念。ul即为flex-container，li是容器内的所有单元吧，官方叫项目，flex item。
借官方几句话： 容器默认存在两根轴，水平主轴main axis和垂直交叉轴cross axis，主轴开始位置与边框交叉点叫main start,结束位置main end,交叉轴开始位置cross start,结束为止cross end,项目默认按照主轴排列，单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
一、flex-container有6个属性
1、flex-direction: row | row-reverse | column | column-reverse;
按顺序展示效果?
2、flex-wrap: nowrap | wrap | wrap-reverse;
更改ul宽度为460px后，li宽100px，当ul宽度减小小于li总宽度时，设置flex-wrap: nowrap，不换行，项目依然排在一条轴线上，但是宽度缩小。
3、flex-flow?属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
? ? ? ?flex-flow: row nowrap? ? ?= =? ? ?flex-direction: row;flex-wrap: nowrap;
4、justify-content: flex-start | flex-end | center | space-between | space-around; 定义了项目在主轴上的对齐方式，以上所有图均设置了?justify-content:?space-around；效果依次如下：
5、align-items: flex-start | flex-end | center | baseline | stretch; 该属性定义了项目在交叉轴上的对齐方式??
在此属性之前以上的属性案例 都是设置align-items：center 对齐方式为交叉轴中点对齐
如果li未设置高度或为auto，那么项目将充满整个容器高度。
6、align-content: flex-start | flex-end | center | space-between | space-around | stretch;该属性定义多根轴线的对齐方式，容器内的项目只有一根轴线时，该属性不起作用。我们得调整一下ul li的样式了。调整flex-wrap:wrap;换行出现多条轴
容器高度400px, 项目高度100px, 设置完align-content:?space-around 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
二、flex-item项目的属性
1、order：?integer 数值越小，排列越靠前，默认值为0
2、flex-grow: number; 定义项目的放大比例，默认为0，如果存在剩余空间也不放大。
设置为2的比1的占据的空间多1倍，60px
3、flex-shrink: number; 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小，负值无效。
该属性用来设置，当父元素的宽度小于所有子元素的宽度的和时（即子元素会超出父元素），子元素如何缩小自己的宽度的
值越大，缩小的越厉害。如果值为0，表示不缩减小。
4、flex-basis: length | auto;? ?flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。 注意单词别打错了，不是basic！！！
5、flex: none | [ 'flex-grow' 'flex-shrink'? || 'flex-basis' ]? ??有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间, flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。
默认值 0 1 auto?如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。
这里有个面试题：当flex：1时，其三个属性值是什么？对应的值是多少？
flex: 1;? ?相当于flex: auto 默认三个属性值是1 1 auto? ；flex-grow、flex-shrink 和 flex-basis? 放大不缩小，按照项目原本大小
flex: none;? ?三个属性值0 0 auto
flex:?initial; 三个属性值 0 a auto 默认值
6、align-self: auto | flex-start | flex-end | center | baseline | stretch |initial | inherit;
把li的高度设置去掉，来看这几个属性值的效果。
align-self: auto;??align-self: center;?align-self:?initial;?align-self: inherit;? 这几个效果没啥差距
align-self: auto; 默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。
align-self: center;?元素位于容器的中心。弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
align-self:?initial;? ? 设置该属性为它的默认值 ，等同于?align-self: auto;
align-self: inherit;??从父元素继承该属性，等同于align-self: auto;
align-self: flex-start；弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界
align-self:?flex-end; 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界
元素位于容器的基线上。
如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效 。 其它情况下，该值将参与基线对齐。？？什么是内轴和测轴？？小疑问
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。 注意: ?Internet Explorer 和 Safari 浏览器不支持 align-self 属性
flex布局
注：实际使用中一般不说左右上下，而是以start、end的位置来定义和描述排列展示方向
无flex的img标签：
设置img(行内元素)为flex布局:
若设置为nowarp(flex-warp的默认值)，由于默认值flax-basis为auto，因此会对元素进行缩放操作，即缩放至适应盒子的尺寸。
而若某个元素无法缩放(例如设置了宽度)则会将溢出。
如果项目的子元素无法缩小，使用nowrap会导致溢出，或者缩小程度还不够小。
basis定义了该元素的布局空白（available space）的基准值。若设定为auto，则会检测该元素(一个felx-item)的宽度并作为basis的值，若未设定宽度，则使用内部元素(如文字、图片等)的宽度作为basis的值。
确定各个basis后，则会得出空白部分的大小，如上图中总宽度为500px，各个basis均为100px，则空白大小为200px。而对这200px的使用，会通过flex-grow定义。
flex-grow定义了元素的放大(沿主轴方向增长尺寸)情况。flex为0则不进行拉伸，flex为其余正整数，则会通过计算权重将空白部分摊分给各个元素，如第一个元素为2，其余为1，则会将200*2/4=100px摊分给a，50px摊分给b，50px摊分给c，试的三个字母各自进行拉伸(只是所处盒子的大小进行拉伸，字母本身不会拉伸变形)。
flex-shrink则定义了元素的缩放情况。那么可以把flex元素flex-shrink属性设置为正整数来缩小它所占空间到flex-basis以下。在计算flex元素收缩的大小时，它的最小尺寸也会被考虑进去，就是说实际上flex-shrink属性可能会和flex-grow属性表现的不一致。
flex的对齐主要是指在cross轴上的对齐方式(主轴或者说main轴可以通过定义宽度、flex-grow flex-shrink flex-basis等进行自定义对齐)。
这个属性的初始值为stretch，这就是为什么flex元素会默认被拉伸到最高元素的高度。实际上，它们被拉伸来填满flex容器 —— 最高的元素定义了容器的高度。
你也可以设置align-items的值为flex-start，使flex元素按flex容器的顶部对齐, flex-end 使它们按flex容器的下部对齐, 或者center使它们居中对齐.
justify-content 属性定义了浏览器如何分配顺着父容器主轴的弹性元素之间及其周围的空间。")属性用来使元素在主轴方向上对齐，主轴方向是通过 flex-direction 设置的方向。初始值是flex-start，元素从容器的起始线排列。但是你也可以把值设置为flex-end，从终止线开始排列，或者center，在中间排列.
你也可以把值设置为space-between，把元素排列好之后的剩余空间拿出来，平均分配到元素之间，所以元素之间间隔相等。或者使用space-around，使每个元素的左右空间相等。
在实例中尝试下列justify-content属性的值：
关于手机端的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单独设置子容器的话，也是不受父容器影响的，在这就不举例子了。
目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。