CSSFlexbox备忘单

介绍

Flexbox 是在布局中获得更多灵活性并简化响应式布局设计的好方法。 它使在 2D 平面上对齐元素变得容易，并且一旦您熟悉了主要属性，就非常容易使用。

第一步是在容器元素上设置 display: flex。 flex 容器的子元素成为 flex 项。 一组属性可以应用于弹性容器，并对所有项目整体产生影响，而一组不同的属性可以应用于弹性项目并对目标项目产生影响。 Flex 项目反过来也可以是它包含的元素的 flex 容器，从而可以轻松创建复杂的布局。

浏览器支持： 2020 年数据显示，全球 98% of 个浏览器 现在支持 flexbox，无需供应商前缀。

以下是快速入门，可帮助您一目了然地了解 Flexbox。 这不会是所有可用属性、值和边缘情况的详尽列表，而是对最有用或常用属性的快速概述。

Flex 容器属性

这是一个包含 3 个 span 弹性项目的容器， 没有弹性盒：

<div class="box">
  <span class="item">
    <img src="/images/dino.svg" width="64" height="45" alt="Dino Sammy">
  </span>
  <span class="item">
    <img src="/images/steampunk.svg" width="64" height="45" alt="Steampunk Sammy">
  </span>
  <span class="item">
    <img src="/images/skeleton.svg" width="64" height="45" alt="Skeleton Sammy">
  </span>
</div>

显示：弹性

现在，让我们通过在容器上设置 display: flex 来自动改进它。 请注意项目现在如何自动扩展到容器中的可用空间：

.container {
  display: flex;
}

弹性方向

您可以使用 flex-direction 属性更改项目的方向：

.container {
  display: flex;
  flex-direction: column;
}

默认值为 row，其他可用值为 row-reverse、column、column-reverse。

row-reverse 和 column-reverse 更改项目的视觉顺序，而无需更改 HTML 标记的顺序：

.container {
  display: flex;
  flex-direction: column-reverse;
}

在行和列方向之间更改的能力使得在较小的设备上调整布局变得非常容易，只需在媒体查询中更改一个 CSS 规则。

证明内容

使用 justify-content 对齐主轴上的项目。 当 flex-direction 为 column 时主轴为 Y 轴，当 flex-direction 为 row 时为 X 轴。

默认值为 flex-start，其他可用值为 flex-end, center, space-between, space-around 和 space-evenly。

对齐内容：flex-start flex-end center space-between space-around 空间均匀

对齐项目

align-items 类似于 justify-content，但允许在交叉轴上对齐项目。 它默认为 stretch 并且还接受 flex-start、flex-end、center 和 baseline：

对齐项目：stretch flex-start flex-end center baseline

对齐内容

align-content 与 align-items 类似，但它仅在有超过一行的 flex 项目时有效（参见下面的 flex-wrap）。 它默认为 stretch 并且还接受 flex-start, flex-end, center, space-between ，空间均匀：

对齐内容：stretch flex-start flex-end center space-between space-周围 空间-均匀

弹性包装

默认情况下，项目不会换行（默认为 nowrap），因此如果项目占用的空间超过可用空间，它们就会溢出。 这可以通过将 flex-wrap 设置为 wrap 的值来解决：

弹性包装：nowrap wrap

弹性项目属性

对齐自我

align-self 与 align-items 类似，但仅适用于特定项目。 这使得打破主要规则的弹性项目变得容易：

align-self: stretch flex-start flex-end center baseline

弹性成长

使用 flex-grow 我们可以控制一个弹性项目与其他项目相比占用的空间量。 flex-grow 接受一个数值，它代表可用空间的一小部分，取决于其他项目的 flex-grow 值。 它的默认值为 0，这意味着该项目不会占用可用的空白空间。

因为它是基于比例的，所以将所有项目设置为 200 的 flex-grow 与将所有项目设置为 1 的 flex-grow 相同。

在下面的示例中，第一项的默认 flex-grow 值为 0，第二项的值为 1，第三项的值为 2：

弹性增长：1 弹性增长：2

弹性收缩

flex-shrink 与 flex-grow 相反，定义了项目的收缩性。 它的默认值为 1，这意味着项目可以缩小，并且与 flex-grow 一样，它基于与其他项目的比例。

弹性基础

flex-basis 定义了项目占用的起始空间，但这不是保证，因为它还取决于空间可用性或是否有额外的空间要填充。

为了说明，在以下示例中，所有项目的 flex-basis 为 25%：

…但是现在让我们也给第一个 flex 项目一个 flex-grow 1。 在以下示例中，所有项目的 flex-basis 为 25%，但第一个项目占用了剩余的可用空间，因为它的 flex-grow 值为 1：

弹性增长：1

…最后，这里我们的第三个项目的 flex-basis 为 77%，并且拒绝收缩以为其他 flex-basis 为 25% 的项目腾出空间，因为它具有 flex-shrink 值0：

弹性基础：77%； 弹性收缩：0；

.item {
  flex-basis: 25%;
}
.item:last-child {
  flex-basis: 77%;
  flex-shrink: 0;
}

柔性

flex 是 flex-grow、flex-shrink 和 flex-basis 组合的简写属性。 例如，下面是 flex-grow 值为 2、flex-shrink 值为 0 和 flex-basis 为 2rem 的项的语法：

.item {
  flex: 2 0 2rem;
}