【CSS3】flex布局-详解篇

前言

flex布局旨在提供一种更有效的方式来布局、对齐和分配容器中项目之间的空间，即使他们的大小是未知的或动态的。

重要的是flex布局和常规布局（基于垂直的块和基于水平的内联）不同，它的方向是不确定的。

flex布局可以简便、完整、响应式的实现各种布局。

并且它已经得到了所有浏览器的支持，意味着可以更安全的使用它。

什么是flex布局

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

要使用flex布局，只需在父元素上设置display属性:

.flex-container {
  display: -webkit-flex; /* Safari */
  display: flex;
}

内联元素也可以使用：

.flex-container {
  display: -webkit-inline-flex; /* Safari */
  display: inline-flex;
}

注意:

设为 Flex 布局后，子元素的float、clear和vertical-align属性将失效。

基础知识和术语

flexbox是一个完整的模块，它有自己的一个属性集。我们将他们分为两组，一组作用于flex容器，一组作用于flex项目。

我们来看这张图，它解释了flex布局背后的思想。

项目将沿着主轴（从主起点到主终点）或交叉轴（从交叉起点到交叉终点）进行布局。

• main axis： 主轴，即flex项目被布局的主轴，不一定是水平的，它取决于flex-direction属性

• main start | main end：主轴的起点和终点，即flex项目将从起点到终点的方向放置在flex容器中。

• main size：flex项目的宽度/高度，无论在交叉维度中是哪个，都是该项的交叉大小。

• cross axis：与主轴垂直的轴称为交叉轴。它的方向取决于主轴的方向。

• cross start | cross end：交叉轴的起点和终点

• cross size：flex项目的宽度/高度，无论在交叉维度中是哪个，都是该项的交叉大小。

flexbox属性

父属性（flex container）

以下六个属性作用于容器上：

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

flex-direction属性

.container {
    flex-direction: row | row-reverse | column | column-reverse
}

它有四个值：

• row(默认值)：主轴为水平方向，起点在左端
• row-reverse：主轴为水平方向，起点在右端
• column：主轴为垂直方向，起点在上沿
• column-reverse：主轴为垂直方向，起点在下沿

看图示意（依次展示）：

flex-wrap属性

默认情况下，所有flex项目都展示在一行，该属性控制flex项目是单行还是多行布局。

.container {
    flex-wrap: nowrap | wrap | wrap-reverse
}

它有3个值：

1、nowrap：默认值，不换行

2、wrap：换行，第一行在上方

3、wrap-reverse：换行，第一行在下方

flex-flow属性

flex-direction and flex-wrap 的简写

.container {
    flex-flow: row wrap;
}

justify-content属性

定义了项目在主轴上的对齐方式。

.container {
    justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

1、flex-start：默认值，左对齐

2、flex-end：右对齐

3、center：居中对齐

4、space-between：两端对齐，项目之间的间隔都相等。

5、space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

6、space-evenly：项目之间的间隔（以及到边缘的空间）相等。

align-items属性

交叉轴线上项目的对齐方式。

.container {
    align-items: stretch | flex-start | flex-end | center | baseline
}

它有5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。

1、stretch：默认值，如果项目未设置高度或设为auto，将占满整个容器的高度。

2、flex-start：起点对齐

3、flex-end：终点对齐

4、center：垂直居中对齐

5、baseline：项目的第一行文字的基线对齐

align-content属性

该属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

.container {
    align-content: stretch | flex-start | flex-end | center | space-around | space-between | space-evenly;
}

它有6个取值。

1、stretch：默认值。轴线占满整个交叉轴

2、flex-start：与交叉轴的起点对齐

3、flex-end：与交叉轴的终点对齐

4、center：与交叉轴的中点对齐

5、space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

6、space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

7、space-evenly：轴线间的间距相等（包括轴线到边缘线的间距）

gap、row-gap、column-gap属性

gap属性显式控制项目之间的空间。它只应用于项目之间的间距，而不是在外部边缘。

.container {
    display: flex;
    
    ...
    
    gap: 10px;
    
    gap: 10px 20px; /* row-gap column-gap */
    
    row-gap: 10px;
    column-gap: 20px;
}

项目间的间隔，我们通常是使用margin来分割，但在flex布局中，使用gap更为便捷。

未设置margin/gap时

设置gap: 20px;后

子属性（flex items）

有6个属性设置在项目上。

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

order属性

定义项目的排列顺序，数值越小，越靠前。默认0

.item {
    order: <integer>;
}

flex-grow属性

定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

grow有放大的意思。

.item {
    flex-grow: <integer>;
}

未设置前

设置flex-grow: 2;后

.item:nth-child(2) {
    flex-grow: 2;
}

flex-shrink属性

定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

shrink有缩小的意思。理解单词意思，更便于理解该属性。

.item {
    flex-shrink: <number>;
}

注意： 负数无效

默认情况下，所有flex项目都可以收缩，但如果我们将其设置为0(不收缩)，它们将保持原始大小。

关键代码

.item {
    height: 100px;
    width: 100px; // 项目的原始大小
}

// 第二项设为0
.item:nth-child(2) {
  flex-shrink: 0;
}

查看效果

flex-basis属性

定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

此属性接受与width和height属性相同的值。

.item {
    flex-basis: <length> | auto;
}

关键代码

// item其他项不设置宽度
.item:nth-child(1) {
  width: 100px;
  flex-basis: 100px;
}

flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

.item {
    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建议使用这个简写属性，而不是设置各个属性。简写可以智能地设置其他值。

align-self属性

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。

默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

简单来说，该属性就是单个项目可以自定义对齐方式。

.item {
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

该属性可取6个值，除了auto外，其余都与align-items属性完全一致。

关键代码

.container {
    display: flex;
    height: 200px;
}

// 设置第一个项目尾部对齐，其余默认都是头部对齐
.item:nth-child(1) {
  align-self: flex-end;
}

结语

以上内容主要参考了以下文章：

• A Complete Guide to Flexbox

• A Visual Guide to CSS3 Flexbox Properties

• 阮一峰-Flex 布局教程：语法篇