flex:

外层元素: flex container flex 容器

• flex-wrap:wrap 折行

• flex-grow:0; /_ 扩张权重_/宽度的权重 默认为 0

• flex-grow:0.x; /按照百分比获取剩余空间/ 所有求和不超过 100%也就是 1 生效

• flex-shrink:; /收缩系数/ 默认 1

• 项目在它们周围有相等的空间
• 不是 flex item 的 flex 父元素从外面看就像块元素一样 如宽度会打满包含块 但是子元素的 margin 不会超出去 但是相邻的元素垂直方向的 margin 还是会合并的
• 收缩或者扩张都不会让元素超出自己 min-w/h 以及 max-w/h 设定 的尺寸 收缩不能收到比自己的 min-width 还小 扩张不能扩张到比自己的 max-width 还大 收缩只发生在不折行的时候 因为如果折行就不可能存在空间不够的情况 flex 父元素”垂直”方向上的额外空间,只会均等的分配给每一行 当高度固定了如果还有额外空间用 height:auto;会自动分配填满

flex 父元素用来调用子元素摆放属性 justify-content

align-items

• align-content
​ 设定所有行(“行们”)在父元素垂直方向的分布 (设置父元素垂直方向上额外空间的分配)

flex 子元素用来调整自身摆放属性

• flex: auto;

• flex: 1;

• flex: 0;

• flex: 100px;

• 当主轴垂直时，它相当于 height当它与 width/height 一起用的时候，如果 flex-basis 的 值不为 auto，则它更优先
• flex-basis: 设定元素在主轴方向上的初始尺寸 当主轴水平时，它相当于 width
当主轴垂直时，它相当于 height
当它与 width/height 一起用的时候，如果 flex-basis 的 值不为 auto，则它更优先

flex 父元素的轴向:flex-direction

flex-wrap 设定交叉轴方向,交叉轴肯定跟主轴是垂直的

• 项目环绕到其他行 ，类似于折行

• wrap-reverse 垂直与主轴,向左或向上

• 项目反向环绕到附加行。

• nowrap 每个项目都适合一行

• 不设定交叉轴方向,即不折行,所有元素在同一行或同一列

• flex-flow 在一个属性上直接设置 flex-direction 和 flex-wrap 换行
flex-flow: wrap column; 换行 向下 项目从上到下放置
flex-grow 设定主轴方向上额外空间的分配 flex-shrink 设定主轴方向上空间收缩的系数

flex-flow 弹性容器

• _ /_ flex-flow: <‘flex-direction’> */
flex-flow: row; 向右 项目的放置与文本方向相同
flex-flow: row-reverse; 向左 项目放置在与文本方向相反的位置
flex-flow: column; 向下 项目从上到下放置
flex-flow: column-reverse; 设置反转
/_ flex-flow: <‘flex-wrap’> _/
flex-flow: nowrap;
flex-flow: wrap; 换行
flex-flow: wrap-reverse;
/_ flex-flow: <‘flex-direction’> and <‘flex-wrap’> _/
flex-flow: row nowrap;
flex-flow: column wrap;
flex-flow: column-reverse wrap-reverse;
/_ Global values _/
flex-flow: inherit;
flex-flow: initial;
flex-flow: revert;
flex-flow: revert-layer;
flex-flow: unset;
​

flex 父元素中的匿名文本

gap