2.8 gap, row-gap, column-gap
gap属性 是 row-gap 和 column-gap 的缩写，指定了 gutters 的大小，也就是网格、flex和多列布局中行和列之间的空间。
gap属性明确控制弹性项目之间的空间。它仅适用于不在外边缘的项目之间的间距。
.container { display: flex; ... gap: 10px; gap: 10px 20px; /* row-gap column gap */ row-gap: 10px; column-gap: 20px; }
<input type="range" min="0" max="10" step="0.1" value="1"> <div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>
3、Flex 项目（Items）属性
3.1 order
order 用来定义子元素的排列顺序，可以取任意整数，默认为0，数值越小越靠前。默认情况下，弹性项目按源代码顺序排列。但是，该order属性控制它们在 flex 容器中出现的顺序。
.item { order: 5; /* default is 0 */ }
相同的项目order恢复到源顺序。
3.2 flex-grow
flex-grow 用来设置项目在 flex 容器中分配剩余空间的相对比例。默认为0，表示如果存在剩余空间也不放大。
剩余空间是
flex容器的大小减去所有flex项的大小加起来的大小。如果所有项目都flex-grow设置为1，则容器中的剩余空间将平均分配给所有项目。如果其中一个项目的值为2，则该项目将占用其他孩子的两倍空间（或者至少会尝试）。
.item { flex-grow: 4; /* default 0 */ /* <number> 值 */ flex-grow: 3; flex-grow: 0.6; /* 全局值 */ flex-grow: inherit; flex-grow: initial; flex-grow: revert; flex-grow: unset; }
注意：设置为负数的无效的。flex-grow 与其他的 flex 属性flex-shrink和flex-basis一起使用，通常使用flex 来简写定义，以确保所有的值都被设置。
<div id="content"> <div class="box" style="background-color:red;">A</div> <div class="box" style="background-color:lightblue;">B</div> <div class="box" style="background-color:yellow;">C</div> <div class="box1" style="background-color:brown;">D</div> <div class="box1" style="background-color:lightgreen;">E</div> <div class="box" style="background-color:brown;">F</div> </div>
3.3 flex-shrink
flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。默认为 1，即如果空间不足会自动缩小。
.item { flex-shrink: 3; /* default 1 */ flex-shrink: 2; flex-shrink: 0.6; /* Global values */ flex-shrink: inherit; flex-shrink: initial; flex-shrink: unset }
注意：设置为负数的无效的。
3.4 flex-basis
flex-basis 指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的尺寸。默认为auto，即根据内容自适应。
备注： flex-basis 简史
- 最初，
"flex-basis:auto"的含义是 "参照我的width和height属性".- 在此之后，
"flex-basis:auto"的含义变成了自动尺寸，而"main-size"变成了 "参照我的width和height属性"。实际执行于 bug 1032922.- 然后呢，这个更改又在 bug 1093316 中被撤销了，所以
"auto"变回了原来的含义; 而一个新的关键字'content'变成了自动尺寸。 (bug 1105111 包括了增加这个关键字).
.item { flex-basis: | auto; /* default auto */ /* 指定<'width'> */ flex-basis: 10em; flex-basis: 3px; flex-basis: auto; /* 固有的尺寸关键词 */ flex-basis: fill; flex-basis: max-content; flex-basis: min-content; flex-basis: fit-content; /* 在 flex item 内容上的自动尺寸 */ flex-basis: content; /* 全局数值 */ flex-basis: inherit; flex-basis: initial; flex-basis: unset; }
备注： 当一个元素同时被设置了 flex-basis (除值为 auto 外) 和 width (或者在 flex-direction: column 情况下设置了height) , flex-basis 具有更高的优先级。如果设置为0，则不考虑内容周围的额外空间。如果设置为auto，则根据其flex-grow值分配额外空间。看这张图。
3.5 flex
flex 是 flex-grow、 flex-shrink 和 flex-basis 的简写形式，默认值为 0 1 auto。第二个和第三个参数（flex-shrink和flex-basis）是可选的。
flex属性的默认值为0 1 auto，但如果您将其设置为单个数值，例如flex: 5;，则会将flex-basis更改为0%，因此等价于设置flex-grow: 5; flex-shrink: 1; flex-basis: 0%;。
.item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] }
3.6 align-self
align-self 会对齐当前 flex 行中的元素，并覆盖已有的 align-items 的值。在网格中，它使项目在网格区域内对齐。在 Flexbox 中，会按照 交叉轴（当前 flex 元素排列方向的垂直方向）进行排列。
.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }
4、Flex 布局和 Grid 布局之间的区别
flexbox 和 grid 之间有很多相似之处，在前端布局中比之前出现的任何布局技术都强大得多。它们可以拉伸和收缩，可以居中，可以重新排序，可以对齐等待。下面我们看看它们之间有什么差异：
4.1 Flexbox 可以选择性地换行
如果我们允许 flex 容器换行，当 flex 项目填满一行时，它们将换行到另一行。它们在下一行的排列位置与第一行发生的情况无关，从而呈现出类似砖石结构的外观。
网格也可以选择换行（如果我们允许自动填充），因为项目可以填充一行并移动到新行（或自动放置它们自己），但是当它们这样做时，它们将沿着相同的网格线排列元素做。
4.2 Flex 是一维布局，而 Grid 是二维布局
虽然 flexbox 可以在允许元素换行，某种意义上创建了行和列这种二维布局，但无法以声明方式控制元素的最终位置，因为元素仅沿单个轴排列，然后相应地换行或不换行。如果主轴够长的话，它们会沿着一维平面做它们做的事情，这是因为我们可以选择做一些事情的单一维度，比如沿基线对齐元素——这是网格无法做到的。
.parent { display: flex; flex-flow: row wrap; /* OK elements, go as far as you can on one line, then wrap as you see fit */ }
你可以将网格视为”二维“，因为我们可以声明行和列的大小，然后根据我们的选择明确地将内容放入行和列中。
.parent { display: grid; grid-template-columns: 1fr 3fr 1fr; grid-template-rows: 200px auto 100px; grid-template-areas: "header header header" ". main sidebar" "footer . ."; } .child-1 { grid-area: header; } .child-2 { grid-area: main; } .child-3 { grid-area: sidebar; } .child-4 { grid-area: footer; }
网格主要是在父元素上定义的。在 flexbox 中，大部分布局（超出最基本的布局）都发生在 children 上。
.flexbox { display: flex; > div { &:nth-child(1) { // logo flex: 0 0 100px; } &:nth-child(2) { // search flex: 1; max-width: 500px; } &:nth-child(3) { // avatar flex: 0 0 50px; margin-left: auto; } } } .grid { display: grid; grid-template-columns: 1fr auto minmax(100px, 1fr) 1fr; grid-template-rows: 100px repeat(3, auto) 100px; grid-gap: 10px; }
4.3 Grid 更擅长重叠
让元素在 flexbox 中重叠需要查看传统的东西，如负边距、transforms 或绝对定位，以打破 flex 行为。使用网格，我们可以将项目放置在重叠的网格线上，甚至可以放在完全相同的网格单元格中。
4.4 Grid 更稳固
虽然 flexbox 的灵活性有时是它的优势，但一个 flex项目 的大小是相当复杂的。它是width、min-width、max-width、flex-basis、flex-grow和flex-shrink的组合，更不用说里面的内容和留白等事项，以及同一行的其他项目。网格有有趣的空间占用功能，比如小数单位，以及内容打破网格的能力，不过，一般来说，我们是在设置网格线，并在其中放置项目，这些项目会直接到位。
4.5 Flex 可以把东西推开
这是 flexbox 的一个相当独特的功能，例如，你可以在一个元素上放 margin-right: auto;，如果有空间的话，这个元素会把其他东西推得越远越好。
4.6 用 Flex 还是 Grid ？
有个推特大佬说的挺好：
意思是：Flexbox是用于对齐。CSSGrid是用来布局的。
当你心里已经有了布局结构时，就使用
Grid 布局，而当你只想让所有东西都fit时，就使用Flex 布局。布局优先 vs 内容优先。
5、推荐几个可视化学习 Flexbox 布局的站点
end~
