CSS Flexbox 布局指南

Flexbox 布局（弹性盒）模块（截至 2017 年 10 月的 W3C 候选推荐）旨在提供一种更有效的方法来布局、对齐和分配容器中项目的空间，即使它们的大小未知和/或动态（因此是“弹性”）。

弹性布局背后的主要思想是赋予容器改变其项目宽度/高度（和顺序）的能力，以最佳方式填充可用空间（主要用于适应各种显示设备和屏幕尺寸）。弹性容器会扩展项目以填充可用空闲空间，或收缩项目以防止溢出。

最重要的是，弹性盒布局与方向无关，而常规布局（垂直为基础的块布局和水平为基础的行内布局）则与方向有关。虽然这些布局对页面来说效果很好，但它们缺乏灵活性（没有双关语意）来支持大型或复杂应用程序（尤其是在方向变化、调整大小、拉伸、收缩等方面）。

**注意：** 弹性盒布局最适合应用程序的组件和小规模布局，而网格布局则适用于更大规模的布局。

由于 flexbox 是一个完整的模块，而不是单个属性，因此它涉及很多内容，包括其所有属性。其中一些属性是为容器（父元素，称为“flex 容器”）设置的，而其他属性是为子元素（称为“flex 项目”）设置的。

如果“常规”布局基于块流和行内流方向，则 flex 布局基于“flex 流方向”。请查看规范中的这张图，了解弹性布局背后的主要思想。

项目将按照主轴（从main-start到main-end）或交叉轴（从cross-start到cross-end）进行排列。

• **主轴** – 弹性容器的主轴是弹性项目沿其排列的主要轴。请注意，它不一定是水平的；它取决于flex-direction属性（见下文）。
• **main-start | main-end** – 弹性项目从 main-start 开始，一直到 main-end 在容器中放置。
• **主尺寸** – 弹性项目的宽度或高度（无论哪个在主维度上）就是该项目的“主尺寸”。弹性项目的“主尺寸”属性是“width”或“height”属性中的任何一个，无论哪个在主维度上。
• **交叉轴** – 垂直于主轴的轴称为交叉轴。它的方向取决于主轴的方向。
• **cross-start | cross-end** – 弹性线用项目填充，并从弹性容器的 cross-start 侧开始，一直到 cross-end 侧放置在容器中。
• **交叉尺寸** – 弹性项目的宽度或高度（无论哪个在交叉维度上）就是该项目的“交叉尺寸”。“交叉尺寸”属性是“width”或“height”属性中的任何一个，无论哪个在交叉维度上。

Flexbox 需要一些供应商前缀才能尽可能支持最多的浏览器。它不仅仅包括在属性前面加上供应商前缀，而且实际上有完全不同的属性和值名称。这是因为 Flexbox 规范随着时间的推移而发生变化，形成了“旧”、“过渡”和“新”版本。

也许最好的方法是用新的（也是最终的）语法编写，然后将您的 CSS 通过Autoprefixer运行，它可以很好地处理回退。

或者，这里有一个 Sass @mixin 来帮助处理一些前缀，这也让您了解需要做什么样的操作

@mixin flexbox() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

@mixin flex($values) {
  -webkit-box-flex: $values;
  -moz-box-flex:  $values;
  -webkit-flex:  $values;
  -ms-flex:  $values;
  flex:  $values;
}

@mixin order($val) {
  -webkit-box-ordinal-group: $val;  
  -moz-box-ordinal-group: $val;     
  -ms-flex-order: $val;     
  -webkit-order: $val;  
  order: $val;
}

.wrapper {
  @include flexbox();
}

.item {
  @include flex(1 200px);
  @include order(2);
}

让我们从一个非常非常简单的示例开始，解决一个几乎每天都会遇到的问题：完美居中。如果您使用 Flexbox，再简单不过了。

.parent {
  display: flex;
  height: 300px; /* Or whatever */
}

.child {
  width: 100px;  /* Or whatever */
  height: 100px; /* Or whatever */
  margin: auto;  /* Magic! */
}

这依赖于在 Flex 容器中设置为auto的边距会吸收额外的空间。因此，设置auto的边距将使项目在两个轴上完美居中。

现在让我们使用更多属性。考虑一个包含 6 个项目的列表，所有项目都具有固定尺寸，但可以自动调整大小。我们希望它们均匀地分布在水平轴上，这样当我们调整浏览器大小时，所有内容都能很好地缩放，并且无需媒体查询。

.flex-container {
  /* We first create a flex layout context */
  display: flex;

  /* Then we define the flow direction 
     and if we allow the items to wrap 
   * Remember this is the same as:
   * flex-direction: row;
   * flex-wrap: wrap;
   */
  flex-flow: row wrap;

  /* Then we define how is distributed the remaining space */
  justify-content: space-around;
}

完成了。其他所有内容只是样式问题。下面是一个包含此示例的笔。请务必访问 CodePen 并尝试调整您的窗口大小，看看会发生什么。

让我们尝试其他一些东西。想象一下，我们在网站最顶部有一个右对齐的导航元素，但我们希望它在中等大小的屏幕上居中，在小型设备上单列显示。很容易。

/* Large */
.navigation {
  display: flex;
  flex-flow: row wrap;
  /* This aligns items to the end line on main-axis */
  justify-content: flex-end;
}

/* Medium screens */
@media all and (max-width: 800px) {
  .navigation {
    /* When on medium sized screens, we center it by evenly distributing empty space around items */
    justify-content: space-around;
  }
}

/* Small screens */
@media all and (max-width: 500px) {
  .navigation {
    /* On small screens, we are no longer using row direction but column */
    flex-direction: column;
  }
}

让我们尝试通过玩转弹性项目灵活性来实现更好的效果！一个移动优先的 3 列布局，带有全宽的页眉和页脚。并且独立于源顺序。

.wrapper {
  display: flex;
  flex-flow: row wrap;
}

/* We tell all items to be 100% width, via flex-basis */
.wrapper > * {
  flex: 1 100%;
}

/* We rely on source order for mobile-first approach
 * in this case:
 * 1. header
 * 2. article
 * 3. aside 1
 * 4. aside 2
 * 5. footer
 */

/* Medium screens */
@media all and (min-width: 600px) {
  /* We tell both sidebars to share a row */
  .aside { flex: 1 auto; }
}

/* Large screens */
@media all and (min-width: 800px) {
  /* We invert order of first sidebar and main
   * And tell the main element to take twice as much width as the other two sidebars 
   */
  .main { flex: 3 0px; }
  .aside-1 { order: 1; }
  .main    { order: 2; }
  .aside-2 { order: 3; }
  .footer  { order: 4; }
}

Flexbox 当然也存在一些 Bug。我见过的最全面的 Bug 集合是 Philip Walton 和 Greg Whitworth 的 Flexbugs。这是一个开源的 Bug 追踪平台，所以我建议直接链接到它。

• CSS Flexible Box Layout Module Level 1 (W3C)
• CSS Flexbox 速查表 (DigitalOcean)
• 使用 Flexbox 在 CSS 中居中内容 (DigitalOcean)

文章 于 2013 年 9 月 26 日

Flexbox 解决

flexbox 布局

Chris Coyier

文章 于 2013 年 11 月 25 日

Flexbox 速查表

flexbox 布局

Chris Coyier

文章 于 2012 年 12 月 23 日

深入了解 Flexbox

flexbox 布局

Chris Coyier

文章 于 2018 年 10 月 23 日

Flexbox 的使用场景

flexbox 布局

Chris Coyier

文章 于 2019 年 2 月 14 日

快速了解 Flexbox 和 Grid 的区别

flexbox 布局

Chris Coyier

文章 于 2022 年 2 月 23 日

CSS Grid 是否取代了 Flexbox？

flexbox 布局

Robin Rendle

文章 于 2020 年 6 月 25 日

布局用 Grid，组件用 Flexbox

flexbox 布局

Robin Rendle

文章 于 2016 年 4 月 13 日

我应该使用 Grid 还是 Flexbox？

flexbox 布局

Robin Rendle

文章 于 2016 年 8 月 13 日

别想太多 (Flexbox) Grids

flexbox 布局

Chris Coyier

文章 于 2021 年 11 月 24 日

构建多方向布局

flexbox 布局

Ahmad El-Alfy

文章 于 2020 年 1 月 6 日

Flexbox 中的自动边距如何工作

flexbox 布局

Chris Coyier

文章 于 2017 年 4 月 10 日

`flex-grow` 很奇怪。还是？

flexbox 布局

Manuel Matuzovic

文章 于 2022 年 10 月 18 日

理解 flex-grow、flex-shrink 和 flex-basis

flexbox 布局

Robin Rendle

文章 于 2019 年 2 月 18 日

使用 Flexbox 实现 IE10 兼容的网格自动放置

flexbox 布局

Brian Holt

文章 于 2013 年 8 月 13 日

“旧” Flexbox 和 “新” Flexbox

flexbox 布局

Chris Coyier

文章 于 2013 年 6 月 15 日

使用 Flexbox：混合旧版本和新版本以获得最佳浏览器支持

flexbox 布局

Chris Coyier

• CSS Flexible Box Layout Module Level 1 (W3C)
• CSS Flexbox 速查表 (DigitalOcean)
• 使用 Flexbox 在 CSS 中居中内容 (DigitalOcean)
• CSS 布局：Flexbox (MDN)
• Flexbox 使用案例 (Smashing Magazine)