弹性盒子由弹性容器(flex container)和弹性子元素(flex item)组成。
弹性容器设置属性 display:flex
一、容器属性
flex-flow 复合属性，是 flex-direction 和 flex-wrap 的简写形式。 默认值：flex-flow: row nowrap
⑴ flex-direction 子元素排列方向
flex-direction: row从左到右
flex-direction: row-reverse从右到左
flex-direction: column从上到下
flex-direction: column-reverse从下到上
⑵ flex-wrap 子元素换行方式
flex-wrap: nowrap不换行
flex-wrap:wrap换行
flex-wrap: wrap-reverse反转 wrap 排列，行颠倒
2 justify-content 子元素沿主轴对齐方式
justify-content: flex-start
justify-content: space-between
3 align-items 子元素在交叉轴上对齐方式
align-items: center垂直方向居中
align-items:flex-start垂直方向的顶部/交叉轴的起点对齐
align-items: flex-end垂直方向的底部/交叉轴的终点对齐
align-items: baseline项目的第一行的文字的基线对齐
align-items: stretch默认值，如果项目未设置高度或设为auto，将占满整个容器的高度
二、子元素属性（写在子元素下）
align-self 用于设置弹性子元素自身在侧轴（纵轴）方向上的对齐方式。允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
align-items: center
align-items: flex-start
align-items: flex-end
align-items: baseline
align-items: stretch
order 定义子元素的排列顺序。数值越小，排列越靠前，默认为order: 0，可以为负值。
flex-grow 定义子元素的扩展比率，主要作用：分配剩余空间。负值无效。
flex-grow: 0默认值，即如果存在剩余空间，也不放大。
flex-grow: 1如果存在剩余空间，放大 ，等分剩余空间。
flex-shrink 定义子元素的收缩比率，值越大，按比例缩的就越小。
flex-shrink: 1默认值，即如果空间不足，缩小。
flex-shrink: 0不缩小。
flex-basis 定义元素的默认基准值。
设置了flex-basis，width就不起作用；同时存在的时候，优先使用flex-basis。
如果容器的宽度太小，子元素排列不下，设置的flex-basis的宽度会自动缩小，直到占满容器。
链接：https://juejin.cn/post/7038088241437736991
弹性盒模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间。这与XUL（火狐使用的用户交互语言）相似，其它语言也使用相同的盒模型，如XAML、GladeXML。使用该模型，可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局。例子使用以下的HTML代码：123传统的盒模型基于HTML流在垂直方向上排列盒子。使用弹性盒模型可以规定特定的顺序，也可以反转之。要开启弹性盒模型，只需设置拥有子盒子的盒子的display的属性值为box（或inline-box）即可。displaybox水平或垂直分布“box-orient”定义分布的坐标轴：vertical和horizional。这两个值定义盒子如何显示body{displayboxbox-orienthorizontal}反向分布“box-direction”可以设置盒子出现的顺序。默认情况下，只需定义分布坐标轴——box随html流分布。如果为水平坐标轴，则从左到右分布；垂直坐标轴则从上到下分布。定义“box-direction”的属性值为“reverse”，则反转盒子的排列顺序。body{displayboxbox-orientverticalbox-directionreverse}具体分布属性“box-ordinal-group”定义盒子分布的顺序。可以随意的控制其分布顺序。这些组以一个从“1”开始的数字定义，盒模型将首先分布这些组，所有这些盒子将在每个组中。分布将从小到大排列。body{displayboxbox-orientverticalbox-directionreverse}#box1{box-ordinal-group2}#box2{box-ordinal-group2}#box3{box-ordinal-group1}盒子尺寸默认情况下，盒子并不具有弹性，如果box-flex的属性值至少为1时，则变得富有弹性。如果盒子不具有弹性，它将尽可能的宽使其内容可见，且没有任何溢出，其大小由“width”和“height”来决定（或min-height、min-width、max-width、max-height）。如果盒子是弹性的，其大小将按下面的方式计算：具体的大小声明（width、height、min-width、min-height、max-width、max-height）；父盒子的大小和所有余下的可利用的内部空间如果盒子没有任何大小声明，那么其大小将完全取决于父box的大小。即：盒子的大小等于父级盒子的大小乘以其box-flex在所有子盒子box-flex总和中的百分比（子盒子的大小=父盒子的大小*子盒子的box-flex/所有子盒子的box-flex值的和）。如果一个或更多的盒子有一个具体的大小声明，那么其大小将计算其中，余下的弹性盒子将按照上面的原则分享剩下的可利用空间。看看下面的例子，理解起来更容易。所有盒子都是弹性的下面的例子中，box1的大小为box2的两倍，box2与box3大小一样。看起来好像是用百分比定义盒子的大小，但是有一个区别：使用弹性盒模型，增加一个盒子，无须重新计算其大小。body{displayboxbox-orienthorizontal}#box1{box-flex2}#box2{box-flex1}#box3{box-flex1}一些盒子有固定大小下面的例子中，box3并不是弹性的，宽度为160px；这样box1和box2将有240px的可利用空间。因此，box1的宽度为160px(240*2/3)，box2的宽度为80px(240*1/3)。body{displayboxbox-orienthorizontalwidth400px}#box1{box-flex2}#box2{box-flex1}#box3{width160px}溢出管理因为是弹性盒子、非弹性盒子混排，有可能所有盒子的尺寸大于或小于父盒子的尺寸。这样就有可能空间太多或空间不足。空间太多如何处理可利用空间的分布取决于两个属性值：box-align和box-pack。属性“box-pack”管理水平方向上的空间分布，有以下四个可能属性：start、end、justify、orcenter。start所有盒子在父盒子的左侧，余下的空间在右侧；end所有盒子在父盒子的右侧，余下的空间在左侧；justify余下的空间在盒子间平均分配；center可利用的空间在父盒子的两侧平均分配。属性“box-align”管理垂直方向上的空间分布，有以下五个可能属性之：start、end、center、baseline和stretch。start每个盒子沿父盒子的上边缘排列，余下的空间位于底部；end每个盒子沿父盒子的下边缘排列，余下的空间位于顶部；center可用空间平均分配，上面一半，下面一半；baseline所有盒子沿着它们的基线排列，余下的空间可前可后；stretch每个盒子的高度调整到适合父盒子的高度body{displayboxbox-orienthorizontalwidth400px}#box1{box-flex2}#box2{box-flex1}#box3{width160px}空间不足怎么办与传统的盒模型一样，overflow属性用来决定其显示方式。为了避免溢出，你可以设置box-lines为multiple使其换行显示。弹性盒模型看起来很不错，Gecko和WebKit对该模型都有一些尝试性的测试。在这些属性之前加上-moz和-webkit即可使用该属性。也即是说，firefox、safari、chrome可以使用这些特性，可以看看这个弹性盒模型的demo。什么是flex布局？
传统的布局方案是基于盒模型，依赖于display:block和float+position，但是对于一些特殊的布局来说就不是很方便，如在盒模型中垂直居中。
2009年W3C提出一种新的布局方案，flex弹性盒布局，目前兼容的浏览器有chrome opera IE Firefox Sifari
flex兼容浏览器版本
但是在未来flex布局将会成为布局的首选方案。
flex是flexinle BOX的缩写。意思是弹性布局，用来为盒模型提供最大的灵活性。 任何一个容器（标签）都可以指定为flex布局。用display:flex；
如果给容器设置flex的时候当前容器内子元素的float,clear,vericla-align都将会失效
flex的基本概念
容器默认存在两根轴：水平的主轴（main axis）和垂直交叉轴（cross axis）.主轴的开始位置（与边框的交叉点）叫做main start, 结束位置叫做main end 交叉轴的开始位置叫做cross start ,结束位置叫做cross end.项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴叫做cross size.
如果给一个元素设置为flex后，这个元素就会作为子元素的flex容器。通过给容器设置属性来改变里面子元素的位置。
二
首先要给父元素添加display:flex；将父元素转化为弹性盒
2.用flex-direction来改变盒子里元素的位置
row 默认在一行内排列（从左向右）
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。）
column ：纵向排列。
column-reverse：反转纵向排列，从下往上排，最后一项排在最上面
3.内容对齐（justify-content）属性应用在 弹性容器 上，把弹性项沿着弹性容器的主轴线（main axis）对齐
justify-content：flex-start 默认，左对齐（图1）
justify-content:flex-end 右对齐（图2）
justify-content:center 居中对齐（图3）
justify-content:space-between 两端对齐，中间自动分配
justify-content:space-around 自动分配距离
主轴对齐方式
4.align-items（交叉轴对齐方式）
flex-start：顶端对齐
flex-end：底对齐
center：垂直居中对齐
baseline：项目内文本的底线对齐
stretch 默认值 项目的高度自适应容器（注：子元素不能设置高）
交叉轴对齐方式
5.flex-wrap
该属性控制flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。
nowrap：flex容器为单行。该情况下flex子项可能会溢出容器
wrap：flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse：反转 wrap 排列。
图1（nowrap）注意如果父元素盒设置宽度会自动缩子元素容器宽度
图2（wrap）
图3（warp-reverse）
容器单行或者多行方式
6、align-content（行与行之间对齐方式）
当伸缩容器的侧轴还有多余空间时，本属性可以用来调整「伸缩行」在伸缩容器里的对齐方式，这与调整伸缩项目在主轴上对齐方式的 <‘ justify-content’>属性类似。 注：本属性在只有一行的伸缩容器上没有效果。
flex-start没有行间距
flex-end底对齐没有行间距
center居中没有行间距
space-between两端对齐，中间自动分配
space-around自动分配距离
