CSS flexbox弹性盒子

指定元素的布局为 flexible

首先，我们需要选择将哪些元素将设置为柔性的盒子。我们需要给这些 flexible 元素的父元素 display 设置一个特定值。

section {
  display: flex;
}

flex模型说明

1. 主轴（main axis）是沿着 flex 元素放置的方向延伸的轴（比如页面上的横向的行、纵向的列）。该轴的开始和结束被称为 main start 和 main end。横轴
2. 交叉轴（cross axis）是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start 和 cross end。纵轴
3. 设置了 display: flex 的父元素被称之为 flex 容器（flex container）。container
4. 在 flex 容器中表现为柔性的盒子的元素被称之为 flex 项（flex item）item

flex-direction

它可以指定主轴的方向（弹性盒子子类放置的地方）— 它默认值是 row

flex-direction: column

你会看到，这会将那些元素设置为列布局，就像我们添加这些 CSS 之前

flex-wrap

当你在布局中使用定宽或者定高的时候，可能会有一个问题出来即处于容器中的 弹性盒子子元素会溢出，破坏了布局
解决方法：

flex-wrap: wrap

flex-flow 缩写

flex-direction: row;
flex-wrap: wrap;

flex-flow: row wrap;

flex 项的动态尺寸

article {
  flex: 1;
}

这是一个无单位的比例值，表示每个 flex 项沿主轴的可用空间大小。本例中，我们设置

元素的 flex 值为 1，这表示每个元素占用空间都是相等的，占用的空间是在设置 padding 和 margin 之后剩余的空间。因为它是一个比例，这意味着将每个 flex 项的设置为 400000 的效果和 1 的时候是完全一样的。

您还可以指定 flex 的最小值。 尝试修改现有的 article 规则：

article {
  flex: 1 200px;
}

article:nth-of-type(3) {
  flex: 2 200px;
}

这表示“每个flex 项将首先给出200px的可用空间，然后，剩余的可用空间将根据分配的比例共享“。 尝试刷新，你会看到分配空间的差别。

flex: 缩写与全写

建议不要使用全写属性，除非你真的需要（比如要去覆盖之前写的）。使用全写会多些很多的代码，它们也可能有点让人困惑。

水平和垂直对齐

div {
  display: flex;
  align-items: center;//垂直居中
  justify-content: center;//水平居中
}

flex 项排序

弹性盒子也有可以改变 flex 项的布局位置的功能，而不会影响到源顺序（即 dom 树里元素的顺序）。这也是传统布局方式很难做到的一点。

button:first-child {
  order: 1;
}

1. 所有 flex 项默认的 order 值是 0。
2. order 值大的 flex 项比 order 值小的在显示顺序中更靠后。
3. 相同 order 值的 flex 项按源顺序显示。所以假如你有四个元素，其 order 值分别是2，1，1和0，那么它们的显示顺序就分别是第四，第二，第三，和第一。
4. 第三个元素显示在第二个后面是因为它们的 order 值一样，且第三个元素在源顺序中排在第二个后面。
   你也可以给 order 设置负值使它们比值为 0 的元素排得更前面。比如，你可以设置 “Blush” 按钮排在主轴的最前面：

button:last-child {
  order: -1;
}

flex 嵌套

参考：https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Flexbox