Flex 布局，学会瞬间让你不再掉头发，让布局变的更简单

前言

Flex布局是CSS3中新增加的一种弹性布局模型，它可以用来实现常见的页面布局，例如：垂直居中、水平居中、等高列布局、底部固定、左右布局、上下布局、宽度自适应、响应式布局等。使用Flex布局可以取代float、position和display等传统布局方式，让我们更轻松、快捷地完成页面搭建。本文将全面详细讲解Flex布局，包括其基础知识、使用方法、布局属性和使用场景等。

一、基础知识

1. Flexbox定义

Flexbox（弹性盒子）布局是一个新的CSS3中的布局模型，是一个一维布局模型，可以用来排列复杂的页面元素，以便在不同的屏幕大小和设备上实现自适应的布局，例如垂直居中和水平居中等。

2. Flex容器和Flex项目

在Flex布局模型中，存在两个基本概念：Flex容器和Flex项目。

Flex容器：指采用Flex布局模型的父元素，通过display:flex或display:inline-flex属性来声明。

Flex项目：指被包含在Flex容器中的每一个子元素，成为Flex项。

3. 主轴和交叉轴

在Flex容器中，存在主轴和交叉轴两个概念。

主轴：Flex容器的主要方向，通常是水平方向（row）或垂直方向(column)。

交叉轴：与主轴交叉的方向，通常是垂直方向（column）或水平方向（row）。

4. 排列方向

Flex容器中的元素排列方向有两种：从左到右（row）和从上到下（column）。

二、使用方法

1. 定义Flex容器

首先，我们需要将Flex容器的display属性设置为flex或inline-flex，来声明它采用了Flex布局模型。这里需要注意，一定要在Flex容器上定义display属性，而不是在子元素上定义。

.container {
  display: flex; /*或者 inline-flex*/
}
1
2
3

2. 设置子元素Flex项目

设置Flex项目通常采用flex属性，这个属性可以细分为三个子属性：flex-grow、flex-shrink和flex-basis。

flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。如果所有项目都设置为1，则等分剩余空间。如果某一个项目的flex-grow属性为2，其余项目都为1，则前者的容器占据的剩余空间将比其他项目多一倍。

flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果所有项目设置为0，则空间不足也不缩小。

flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size）默认值为auto，即项目的本来大小。

.item {
  flex: 1; /*设置为1则等分剩余空间*/
}
1
2
3

3. 设置Flex容器的排列方向和换行方式

设置Flex容器的排列方向和换行方式，可以使用flex-direction属性和flex-wrap属性。

flex-direction属性可选属性值：

row（默认值）：主轴为水平方向，起点在左端。

row-reverse：主轴为水平方向，起点在右端。

column：主轴为垂直方向，起点在上沿。

column-reverse：主轴为垂直方向，起点在下沿。

flex-wrap属性可选属性值：

nowrap（默认）：不换行。

wrap：换行，第一行在上方。

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

.container {
  flex-direction: row; /*设置为水平方向*/
  flex-wrap: wrap; /*超出部分自动换行*/
}
1
2
3
4

4. 设置Flex项的对齐方式

我们可以使用align-items属性和justify-content属性来分别设置Flex项在交叉轴和主轴上的对齐方式。

align-items属性可选属性值：

flex-start：交叉轴的起点对齐。

flex-end：交叉轴的终点对齐。

center：交叉轴的中点对齐。

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

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

justify-content属性可选属性值：

flex-start（默认值）：左对齐。

flex-end：右对齐。

center：居中。

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

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

space-evenly：分布在父容器内部，间隔相等。

.container {
  align-items: center; /*交叉轴居中*/
  justify-content: space-between; /*主轴两端对齐*/
}
1
2
3
4

三、布局属性

1. Flex容器的属性

   Flex容器有一些常用的属性，可以帮助我们控制Flex布局模型下的布局效果。

   flex-direction：设置主轴方向。

   flex-wrap：设置子元素是否换行。

   justify-content：设置在主轴上如何排列Flex项。

   align-items：设置在交叉轴上如何排列Flex项。

   align-content：设置在交叉轴上如何排列多行Flex项。

2. Flex项目的属性

   Flex项有一些常用的属性，可以帮助我们更加灵活地控制元素的布局效果。

   order：定义元素的排列顺序。

   flex-grow：定义元素的放大比例。

   flex-shrink：定义元素的缩小比例。

   flex-basis：定义元素的基准大小。

   flex：设置元素的放大、缩小、基准大小三个属性。

   align-self：设置元素在交叉轴的对齐方式，会覆盖Flex容器的align-items属性。

四、使用场景

1. 等高列布局

通常情况下，我们希望多列内容高度相等，实现一种等高列布局效果。传统的实现方式为通过JavaScript计算每一列高度后再进行调整，而使用Flex布局可以非常方便地实现这种效果。我们只需要将父容器设置为Flex容器，并设置所有子元素的flex-grow属性为1即可。

.container {
  display: flex;
}

.item {
  flex: 1;
}
1
2
3
4
5
6
7

2. 固定底部

有时候我们需要将底部的一些内容固定在页面底部，例如页脚、返回按钮等。

使用Flex布局可以非常方便地实现固定底部的效果，只需要将父容器设置为Flex容器，并且设置Flex容器的高度为100%，子元素设置为绝对定位（position:absolute），然后设置bottom为0即可。

.container {
  display: flex;
  min-height: 100vh; /* 保证占满全屏 */
  flex-direction: column; /* 竖直方向 */
}

.content {
  flex: 1; /* 占满剩余空间 */
  position: relative; /* 相对定位 */
}

.footer {
  position: absolute; /* 绝对定位 */
  bottom: 0; /* 底部对齐 */
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

3. 水平居中和垂直居中

使用Flex布局可以非常方便地实现水平居中和垂直居中的效果。

水平居中：将Flex容器的justify-content属性设置为center即可。

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
}
1
2
3
4

垂直居中：将Flex容器的align-items属性设置为center即可。

.container {
  display: flex;
  align-items: center; /* 垂直居中 */
}
1
2
3
4

如果需要同时实现水平居中和垂直居中，则将Flex容器的justify-content属性和align-items属性都设置为center即可。

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
1
2
3
4
5

4. 左右布局

左右布局是一种常见的页面布局方式，通常用于实现页面的两栏式布局或者导航栏加内容区域的布局。使用Flex布局可以轻松实现左右布局效果，只需将父容器设置为Flex容器，然后设置内容区域的flex属性为1，即可让其占据剩余空间，左侧区域设置固定宽度即可。

HTML代码示例：

<div class="container">
  <div class="sidebar">这是左侧区域div>
  <div class="content">这是内容区域div>
div>
1
2
3
4

CSS代码示例：

.container {
  display: flex;
}

.sidebar {
  width: 200px; /* 左侧区域固定宽度 */
}

.content {
  flex: 1; /* 占满剩余空间 */
}
1
2
3
4
5
6
7
8
9
10
11

5. 上下布局

上下布局也是一种常见的页面布局方式，通常用于实现页面的顶部导航栏和内容区域的布局。使用Flex布局可以轻松实现上下布局效果，只需将父容器设置为Flex容器，然后设置内容区域的flex属性为1，即可让其占据剩余空间，顶部导航栏设置固定高度即可。

HTML代码示例：

<div class="container">
  <div class="header">这是顶部导航栏div>
  <div class="content">这是内容区域div>
div>
1
2
3
4

CSS代码示例：

.container {
  display: flex;
  flex-direction: column; /* 垂直方向 */
}

.header {
  height: 60px; /* 顶部导航栏固定高度 */
}

.content {
  flex: 1; /* 占满剩余空间 */
}
1
2
3
4
5
6
7
8
9
10
11
12

6. 宽度自适应

使用Flex布局可以实现宽度自适应，使元素宽度根据父元素的宽度自动调整。只需要将父容器设置为Flex容器，并设置子元素的flex属性为1或者0即可。

HTML代码示例：

<div class="container">
  <div class="item">这是一个自适应宽度的元素div>
  <div class="item-fixed">这是一个固定宽度的元素div>
div>
1
2
3
4

CSS代码示例：

.container {
  display: flex;
}

.item {
  flex: 1; /* 自适应宽度 */
}

.item-fixed {
  width: 200px; /* 固定宽度 */
}
1
2
3
4
5
6
7
8
9
10
11

7. 响应式布局

响应式布局是指页面根据不同设备的屏幕大小和分辨率，自动适应不同的布局。使用Flex布局可以轻松实现响应式布局，只需要设置不同的Flex属性值，通过媒体查询调整属性值，即可实现不同屏幕大小下的布局效果。

HTML代码示例：

<div class="container">
  <div class="item">这是一个元素div>
  <div class="item">这是另一个元素div>
  <div class="item">这是第三个元素div>
div>
1
2
3
4
5

CSS代码示例：

.container {
  display: flex;
  flex-wrap: wrap; /* 换行 */
}

.item {
  flex: 1; /* 等分剩余空间 */
}

@media (max-width: 768px) {
  .item {
    flex-basis: 50%; /* 屏幕小于768px时，每行只显示两个元素 */
  }
}

@media (max-width: 480px) {
  .item {
    flex-basis: 100%; /* 屏幕小于480px时，每行只显示一个元素 */
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20