变成flex子项之后的变化：

  • flex子项呈现块状化，匿名的内联元素也会块状化。不过单独的Enter、空格、Tab不会进行渲染，会被忽略掉。
  • flex子项浮动无效，设置float没用。
  • flex子项position即便为static，也支持z-index。z-index不为auto，则会创建层叠上下文。
  • flex子项margin不会合并。
  • flex子项可以使用margin：auto进行剩余空间的只能分配。
  • flex子项绝对定位后会脱离弹性布局。

流向控制

flex-flow：flex-direction 和 flex-wrap 的缩写。可出现一个或两个值，不区分顺序。

flex-direction：row | row-reverse | column | column-reverse

flex-wrap：nowrap | wrap | wrap-reverse（向start方向换行）

对齐设置

  • justify：表示设置水平方向（主轴方向）
  • align：表示设置垂直方向（次轴方向）
  • items：表示设置全体元素
  • content：表示整体布局
  • self：表示设置某一个子元素

justify-content：flex-start（默认） | flex-end | center | space-between | space-around | space-evenly

【一个小Demo】当flex容器设置了overflow滚动，同时设置justify-content为flex-end时，滚动效果会失效。

align-items：stretch（默认）| flex-start | flex-end | center | baseline

align-self：auto（默认，表示随它爹）| stretch | flex-start | flex-end | center | baseline

如果flex子项设置了高度值，那么这个高度的优先级会比stretch高，结果显示为设置的高度值。

baseline对齐意思是让所有flex子项的内外基线在一条线上。（各子项中的字母x不论各自字体有多大，始终保持所有x的下边缘对齐）

align-content：stretch（默认，表平分占满）| flex-start | flex-end | center | space-between | space-around | space-evenly

顺序控制

order：flex各子项的order值都默认为0，越小排的越靠前。可以为负数。

弹性设置

flex-grow: 属性是数值，可以是小数。表示空间有富余的时候该如何分配给子项。默认为0，不分配。当仅有1个子项设置此属性：小于1表示占据的比例，不完全分配剩余空间，大于1则独享有所剩余空间；当多个子项均设置此属性时，总和小于1则按属性值分配，总和大于1则按各值比例分配剩余空间。

flex-shrink: 原理类似flex-grow，默认为1。小于1时依然会有部分内容溢出。

flex-basis: 空间分配的基础尺寸。默认auto。规范支持一些关键字属性，例如：content, fill, max-content, min-content, fit-content不过目前各浏览器尚未很好实现支持。

flex 属性设置为单值的情形

initial初始默认值，可收缩，不膨胀，不分配多出的空间（0 1 auto）
0缩成最小宽度，往往表现为flex子项宽度=所含图片的宽度（0 1 0%）
none不具弹性（0 0 auto）
1子项全设置为1时，平均分配空间（1 1 0%）
auto子项全设置为auto时，根据各自内容宽度，按比例分配空间（例如自适应导航条）（1 1 auto）

flex属性单值如果是数值，那它就是 flex-grow 的值。此时 flex-shrink 为1，flex-basis 为0%；

flex属性单值如果是长度值，那它就是 flex-basis 的值。此时 flex-grow 为1，flex-shrink 为1。

flex属性为双值的情形

第一个值一定是 flex-grow 值。

第二个值如果是数值，那它就是 flex-shrink，此时 flex-basis 为0%；

第二个值如果是长度值，那它就是 flex-basis，此时 flex-shrink 为 ？

flex属性为三值的情形

分别为：flex-grow、flex-shrink、flex-basis

flex子项的最终宽度尺寸

优先级：最大最小尺寸限制 > 弹性增长或收缩 > 基础尺寸

【基础尺寸】flex-basis > width > 最大内容宽度

  1. 如果设置了flex-basis（不为auto），则以flex-basis为准，width属性值在确立基础尺寸这一环节会被忽略。
  2. 没设置flex-basis（或值为auto），有width，则会以width值为基础尺寸。
  3. 如果flex-basis、width都没有设置，则以最大内容宽度作为基础尺寸。
  4. 如果同时设置了width、flex-basis，IE和旧版Firefox会永久忽略width值，这将影响弹性收缩时的宽度表现

【弹性收缩时flex子项的最小尺寸】min-width > min(width/最小内容宽度) ，flex-basis不起作用

  1. 在没有设置min-width时：width值、最小内容宽度，谁小就用哪个值作为此flex项的最小尺寸。
  2. 在min-width、width都没有设置的时候，最小内容宽度会被应用为此flex项的最小尺寸。
  3. 若设置了overflow:hidden，当最小尺寸就是最小内容宽度时，最小尺寸无效（即没有最小尺寸的限制，宽度甚至可以为0）。

【最大/小限制】

  1. 如果设置了min-width，max-width，则最终尺寸遵守此限制。

一个控制最小尺寸的案例：实现单行文字溢出打点

https://demo.cssworld.cn/new/6/2-15.php