CSS Flexbox 布局完全指南 （一）：4000字，多示例讲解

理解 Flexbox 最好的方式是什么？学好基础，再大量练习。这正是我们要在这篇文章中做的事情。

要注意的几点

- 这篇文章预设你是一名中级开发者，并且对 Flexbox 有点了解，不过......

- 如果你对 CSS 有些了解，完全不知道 Flexbox，我写了一篇综合指南（免费文章，阅读时间约为 46 分钟）

- 如果你对 CSS 掌握得不是很好，我推荐你阅读 CSS 全面（实用）指南（74 课时的付费课程）

- 你不需要遵照这里列出的示例顺序

- Flexbox 只是一种布局的技巧，实际项目中涉及到的东西除了布局还有很多

- 当你看到例如 div.ohans 的例子，这代表类名是 ohans的 div

示例一：如何用 Flexbox 制作一个影片集

使用 Flexbox 实现横向纵向排列比大多数人想象的要简单。

例如一个如下的简单标识文本：

<main class="gallery">  <img src="/sample.jpg">  <img src="/sample.jpg">  <img src="/sample.jpg">  <img src="/sample.jpg">  <img src="/sample.jpg">  <img src="/sample.jpg">  <img src="/sample.jpg">  <img src="/sample.jpg">  <img src="/sample.jpg">  <img src="/sample.jpg"></main>

main.gallery 里有十张图片。

假定 main.gallery 覆盖整个可见屏幕。

.gallery {   min-height: 100vh}

有关图片的快速标记

图片默认是一个 inline-block 元素，有宽高，通常排列在同一行（除了图片尺寸有限定，一行排不下的情况）。

起始点

把所有图片放在一起，上面的标识文本显示效果如下：

10 张图片本身的宽高尺寸保持不变，在需要的时候自动换行，很好;)

现在，看下 Flexbox 的效果:

.gallery {    display: flex }

现在，图片的默认属性已经发生改变。它们从 inline-block 元素变成了 flex-items。

由于 .gallery 里的 Flexbox 布局，里面的图片会被压缩排列在一行内，而且它们会被纵向拉伸成这样：

图片都被纵向拉伸，并且挤在一行内，不能更丑 :(

这就是由于 Flexbox 布局的默认展示方式:

1、将所有的子元素压在一行内，不换行。

这并不适用于图片库，因此我们可以这样改变：

.gallery {    flex-wrap: wrap}

这样所有的元素会在适当的位置换行成多行排列。

因为 wrap 值的改变，现在图片换行排列

2、现在图片有换行，但是仍然被纵向拉伸。我们当然不想要这样变形的布局。

stretch 显示是因为 flex 里默认的 align-items 值。

align-items: stretch

我们可以改成这样：

.gallery {  ...  align-items: flex-start}

这样图片不会拉伸，而是保持它们默认的宽和高。

如下所示，它们会在纵向保持首部对齐。

现在图片都没有变形，这才是我们在使用 Flexbox 之前想要的效果

现在我们就有了使用 Flexbox 的强大图片集。

使用 Flexbox 的优点

此刻 Flexbox 似乎没展现出什么优势，图片还是像使用 Flexbox 之前一样。

除了能得到一个免费的响应式图片集外，使用 Flexbox 的另一个优势就是它的对齐选项。

还记得 Flex 容器 .gallery 设定的样式 flex-direction: row justify-content: flex-start 和 align-items: flex-start。

如下所示，改变默认值，我们就可以立马改变图片库的布局。

.gallery {   ...   justify-content:center;}

图片在水平方向上完美居中

如上所示，这会让图片水平居中。

.gallery {   ...   justify-content:center;   align-items: center;}

再进一步，我们可以让图片完美居中对齐（无论是水平还是垂直）

如上所示，这可以让图片在 .gallery 内水平和垂直都居中。

你可以通过 Flexbox 的布局方式随意选择你想要的对齐选项。

也可以在 CodePen 查看 Flexbox 图片库的实时布局效果。

示例二：如何通过 Flexbox 布局卡片

卡片在网上很流行，无论是Google, Twitter 还是 Pinterest，每个网站都在使用卡片。

卡片是一种在弹性容器内组合相关信息的页面设计方式，视觉上很像一种玩的卡片。

有很多使用卡片的优秀案例，其中一个常用的就是价格表。

价格表模型

让我们来建一个。

标识文本

我们给每个卡片设定一个如下标识：

<section class="card">  <header>  </header>

 <ul>    <li></li>    <li></li>    <li></li>  </ul>  <button></button></section>

这里有至少 3 个卡片，我们把这些卡片包在 div.cards 里。

<div class="cards"></div>

现在已经有了一个父元素。在这个例子中，父元素充满整个视图。

.cards {   min-height: 100vh}

建立 Flexbox 布局

下面的代码块新建了一个在 .cards 里面的 Flexbox 布局样式。

.cards {  display: flex;  flex-wrap: wrap}

如果你还记得上一个例子， flex-wrap 可以让 flex-items 元素换行。

由于子元素排列需要更大的宽度，所以子元素不能在父元素内排列时就会换行。

接下来我们给 .card 元素一个初始宽度。

使用 Flexbox 如下布局：

.card {  flex: 0 0 250px}

这个样式将 flex-grow 和 flex-shrink 的值设为 0， flex-basis 值为 250px。

这时，卡片会在页面的起始处对齐，并且竖向排列。

卡片首部对齐

这有时可能满足你的使用需求，但大部分情况下，都不行。

Flex 容器的默认值

上面的布局效果是由于 Flex 容器的默认布局设置。

卡片在页面内靠左上角对齐，因为 justify-content 的值默认为 flex-start。

同时，卡片垂直拉伸充满整个父元素的高度，因为 align-items 的默认值是 stretch。

改变默认值

我们可以通过改变 Flexbox 提供的默认值来达到更好的效果。

看下面几个例子：

align-items: flex-start; justify-content: center

align-items: flex-end; justify-content: center

align-items: center; justify-content: center

你可以在 CodePen 看最终的效果。

示例三：如何使用 Flexbox 创建网格布局

在这个例子中，我们要探讨整体的 CSS 框架概念，这是很重要的一点。

什么是网格布局？

网格是用来构建内容的一系列水平垂直相交引导线。

一系列水平垂直相交引导线

如果你对 Bootstrap 这样的 CSS 框架比较熟悉，那你之前一定使用过网格布局。

你所掌握的内容可能不一样，但这个例子会涵盖不同的网格布局类型。

我们先来看第一种，基本网格布局。

基本网格布局

一组列宽度相同的基础网格

这些网格有以下特点：

- 网格单元格平均布局并充满整行

- 单元格高度一致

使用 Flexbox 很容易实现这个效果，看下面这个标识文本：

<div class="row">  <div class="row_cell">1</div></div>

每个 .row 都是自己的 Flex 容器。

.row 里的每个元素也就是 Flex 元素，所有的 Flex 元素都平均分布在一行中。

根据设计，无论有 3 个子元素

<div class="row">  <div class="row_cell">1/3</div>  <div class="row_cell">1/3</div>  <div class="row_cell">1/3</div></div>

6 个子元素

<div class="row">  <div class="row_cell">1/6</div>  <div class="row_cell">1/6</div>  <div class="row_cell">1/6</div>  <div class="row_cell">1/6</div>  <div class="row_cell">1/6</div>  <div class="row_cell">1/6</div></div>

或是 12 个子元素，都是没影响的

<div class="row">  <div class="row_cell">1/12</div>  <div class="row_cell">1/12</div>  <div class="row_cell">1/12</div>  <div class="row_cell">1/12</div>  <div class="row_cell">1/12</div>  <div class="row_cell">1/12</div>  <div class="row_cell">1/12</div>  <div class="row_cell">1/12</div>  <div class="row_cell">1/12</div>  <div class="row_cell">1/12</div>  <div class="row_cell">1/12</div>  <div class="row_cell">1/12</div></div>

解决方案

达到这个效果只需要两步：

1、新建一个 Flexbox 布局文本：

.row {   display: flex;}

2. 扩大每个 flex-item 元素，让它们以相同比例均匀布满整行：

.row_cell {   flex: 1}

就是这样。

方案解释

flex: 1

flex 是 flex-grow、 flex-shrink 和 flex-basis 三个不同 Flexbox 属性的缩写。

flex: 1 只有 1 的值，这个值代表的是 flex-grow 属性。

而 flex-shrink 和 flex-basis 则分别设置为 1 和 0。

flex: 1  === flex: 1 1 0

有确定大小的网格元素

有时候你需要的效果并不是同样大小的水平网格布局。

你可能想要一个元素是其他的两倍，或者几分之一。

水平网格布局中的元素是其他的两倍或三倍

实现方式很简单。

对于这些有确定大小的网格元素，只需要加一个这样的修饰符类：

.row_cell--2 {   flex: 2}

加上这个类，可以看到第一个 div 子元素代码如下：

<div class="row">  <div class="row_cell row_cell--2">2x</div>  <div class="row_cell">1/3</div>  <div class="row_cell">1/3</div></div>

加上 .row__cell--2 类名的元素会是其他默认元素的两倍大小。

一个占可用空间 3 倍的元素：

.row_cell--3 { flex: 3 }

有确定对齐方式的网格元素

多亏了 Flexbox 布局，我们不需要给每个元素设置特定的对齐值。你可以给任何一个元素设定不同的对齐方式。

通过下面的修饰符类，可以达到这样的效果：

.row_cell--top {  align-self: flex-start}

这可以让特定的元素在 row 内靠顶部对齐。

应用 .row\_cell — top 类可以让特定的元素在 row 内靠顶部对齐

你一定有在标识文本中给特定元素加上这个类。看文本中第一个 div 子元素：

<div class="row">  <div class="row_cell row_cell--top"></div>  <div class="row_cell"></div>  <div class="row_cell"></div></div>

下面是其他可选的对齐方式：

.row_cell--bottom {  align-self: flex-end}

给特定的元素加上 .row\_cell — bottom 类会让它在 row 内靠底部对齐

.row_cell--center {  align-self: center}

给特定的元素加上 .row\_cell — center 类会让它在 row 内居中对齐

行内对齐

像特定的元素可以对齐一样，行内子元素也可以整体对齐。

可以使用下面的修饰符类达到这样的效果：

.row--top {   align-items: flex-start}

一行上的三个元素都靠顶部对齐

需要注意的一个重点是，修饰符类 .row--top 一定要被加在 row 或是父元素 flex-container 上。

<div class="row row--top">  <div class="row_cell"></div>  <div class="row_cell"></div>  <div class="row_cell"></div></div>

其他的对齐选项见下：

.row--center {   align-items: center}

整行的三个元素都居中对齐

.row--bottom {   align-items: flex-end}

整行的三个元素都靠底部对齐

嵌套网格

只需要简单的设置，rows（行元素）就可以嵌套布局。

一行内有两个元素，其中一个是另一个的两倍大小。一行三个元素居中嵌套排列在较大的元素里

你可以在这里查看最终的布局效果。

更多网格布局

当你可以用 Flexbox 垂直网格甚至更复杂的参数实现好看的网格构造时，就可以把这个很好的工具用于工作。你可以从 CSS 网格布局这份资料了解更多 CSS 网格布局的解决方案。

更多示例将在文章 Part 2 展示。