CSS3 Flexbox 布局指南（上）-FunTeaLearn Online Web Tutorials

Flexbox 布局（Flexible Box Layout），是 CSS3 新增的一种布局方式，它可以方便的进行网页布局以及响应式设计。Flexbox 布局不仅提供了更为简单的成员排列方式，还可以解决众多的布局问题。如果你想提高你在前端开发中的布局技能，那么就需要学习这个新的布局方式。

Flexbox 概述

Flexbox 布局模型，提供了一种更为灵活、更为简单的布局方式，可以轻松地控制子元素在容器中的布局。Flexbox 通过在容器上定义 display: flex，将一个元素变为 Flexbox 容器，通过对子元素定义属性，即可轻松地定义布局。

Flexbox 的属性

在使用 Flexbox 布局之前，我们需要先了解一些关于 Flexbox 的基本属性。

容器属性

以下是容器属性：

display: 这是设置容器为 Flexbox 容器的属性。容器用 display: flex 定义。
flex-direction: 决定主轴的方向。取值有 row（默认，从左向右）、row-reverse（从右向左）、column（从上到下）、column-reverse（从下到上）。
justify-content: 决定了主轴上的对齐方式。默认为 flex-start，也可以选择 flex-end（右对齐）、center（居中）、space-between（两端对齐，项目之间的间隔相等）、space-around（每个项目底部、顶部间隔相等）。
align-items: 决定了交叉轴上的对齐方式。默认为 stretch，也可以选择 flex-start（顶部对齐）、flex-end（底部对齐）、center（居中对齐）、baseline（基线对齐）。
flex-wrap: 控制 Flex 容器内部的子元素是否换行。有 nowrap（默认，不换行）、wrap（换行）、wrap-reverse（换行并且逆序排列）。

项目属性

以下是项目属性：

order: 用于控制项目的排列顺序。数值越小，排列越靠前。默认为 0。
flex-grow: 决定项目在可用空间内的扩展比例，默认为 0。
flex-shrink: 决定项目在空间不足时的缩小比例，默认为 1。
flex-basis: 决定了项目在分配多余空间之前，占据的空间，默认为 auto（项目的本来大小）。
flex: 是 flex-grow、flex-shrink 和 flex-basis 三个属性的缩写。为此属性提供一个非 0 值即可让项目扩展。
align-self: 设置单个项目在交叉轴上的对齐方式。

构建 Flexbox 布局

创建 Flex 容器

要使用 Flexbox 布局，首先需要将元素的 display 属性设置为 flex，就可以将这个元素变为 Flexbox 容器。例如：

.container {
  display: flex;
}

容器的主要轴

Flexbox 布局有一个主轴（Main Axis），默认情况下，主轴是横向的，从左到右排列。可以通过 flex-direction 属性来改变主轴方向。例如，将主轴方向改为纵向：

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

容器的对齐方式

在 Flexbox 布局中，justify-content 属性用于定义主轴上的对齐方式，取值可以是 flex-start（默认值，左对齐）、flex-end（右对齐）、center（居中对齐）、space-between（两端对齐）、space-around（每个项目周围的空白均相等）。例如：

.container {
  display: flex;
  justify-content: center;
}

效果图：

容器的交叉轴

在 Flexbox 布局中，容器的交叉轴是相对于主轴的。默认情况下，交叉轴是垂直的。可以通过 flex-direction 属性来改变主轴方向。例如，将交叉轴方向改为水平：

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

项目的顺序

在 Flexbox 布局中，order 属性可以用来控制项目的顺序，数值越小，排列越靠前。默认情况下，项目的 order 值为 0，可以为其设置其他值。例如：

.item {
  order: 1;
}

项目的扩展

在 Flexbox 布局中，flex-grow 属性指定项目在可用空间内的扩展比例，默认为 0。例如：

.item {
  flex-grow: 1;
}

项目的收缩

在 Flexbox 布局中，flex-shrink 属性指定项目在空间不足时的缩小比例，默认为 1。例如：

.item {
  flex-shrink: 1;
}

项目的大小

在 Flexbox 布局中，flex-basis 属性决定了项目在分配多余空间之前占据的空间，默认为 auto，即项目本来的大小。

.item {
  flex-basis: 100px;
}

项目的缩写

flex 属性是 flex-grow、flex-shrink 和 flex-basis 三个属性的缩写。例如：

.item {
  flex: 1 0 100px;
}

对项目的对齐

在 Flexbox 布局中，align-self 属性可以用来设置单个项目在交叉轴上的对齐方式。默认情况下，align-items 属性设置为 stretch。例如，可以对一部分项目设置 align-self 属性来进行对齐。

.item:nth-child(3) {
  align-self: flex-end;
}

示例代码

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

-- -------------------- ---- -------
---------- -
  -------- -----
  ---------------- --------------
  ------------ -------
  ---------- -----
  ---------- ------
  ------- - -----
-
----- -
  ----- - - ----------- - ------
  ---------- ----------- - ------
  ----------------- -----
  -------------- ----
  -------- -----
  -------------- -----
-

总结

Flexbox 布局，可以轻松地进行网页布局以及响应式设计。上述这些属性中，虽然每个属性都很重要，但是 align-items、justify-content、flex-direction 这三个属性对于我们掌握 Flexbox 布局而言，是至关重要的。同时，在实际项目实践中，我们还需要根据不同的需求，灵活使用其他的属性，例如 flex-wrap、order、align-self 等，才能让 Flexbox 布局技术真正发挥出来，从而达到更好的效果。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/6455f56a968c7c53b0948f83

CSS3 Flexbox 布局指南（上）