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值分配额外空间。看这张图。

微信图片_20230613134847.png

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~

【重学CSS】图文并茂！一次性搞懂 Flex 布局，实现“布局自由”~(下）