CSS Flex布局|极客教程

CSS Flex布局

在前端开发中，常常使用CSS来控制页面的布局和样式。传统的布局方法使用盒模型进行定位，但是在响应式设计和复杂布局中，盒模型的限制逐渐显现出来。为了解决这个问题，CSS3引入了Flex布局。

Flex布局是一种弹性盒模型，它的目的是提供一种更加有效的方式来布局、对齐和分配容器中的元素，而不依赖于原有的盒模型属性和浮动方式。使用Flex布局可以实现简单而灵活的网页布局，特别适合在移动端开发中应用。

Flex容器和Flex项目

在使用Flex布局之前，首先需要理解Flex容器和Flex项目的概念。

Flex容器：指定了一种容器，容器内部的子元素（称为Flex项目）可以按照一定的规则进行布局。在CSS中，通过给容器添加display: flex;或display: inline-flex;属性，就可以将容器设置为Flex布局。
Flex项目：容器内的各个子元素就是Flex项目，它们将按照Flex容器的排列规则进行排列。

Flex容器属性

通过设置Flex容器的属性，可以控制里面Flex项目的布局方式。下面是一些常用的Flex容器属性：

1. `flex-direction`

flex-direction属性规定了Flex项目在容器中的排列方向，包括以下几个值：

row：默认值，水平方向从左到右排列。
row-reverse：水平方向从右到左排列。
column：垂直方向从上到下排列。
column-reverse：垂直方向从下到上排列。

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

2. `flex-wrap`

flex-wrap属性决定了Flex项目在一行或一列中是否换行，可取值为：

nowrap：默认值，不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。

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

3. `justify-content`

justify-content属性定义了Flex项目在主轴上的对齐方式，主轴是Flex容器的排列方向。常用取值有：

flex-start：项目向主轴起点对齐。
flex-end：项目向主轴终点对齐。
center：项目居中对齐。
space-between：项目沿主轴均匀分布。
space-around：项目沿主轴两侧均匀分布，间隔相等。

.container {
  display: flex;
  justify-content: space-around;
}

4. `align-items`

align-items属性定义了Flex项目在交叉轴（与主轴垂直的轴）上的对齐方式，常用取值有：

flex-start：项目向交叉轴起点对齐。
flex-end：项目向交叉轴终点对齐。
center：项目居中对齐。
baseline：项目基线对齐。
stretch：项目拉伸以适应容器。

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

5. `align-content`

align-content属性定义了多根轴线的对齐方式，当Flex容器中有多根轴线时才会生效。常用取值有：

flex-start：轴线向交叉轴起点对齐。
flex-end：轴线向交叉轴终点对齐。
center：轴线居中对齐。
space-between：轴线沿交叉轴均匀分布。
space-around：轴线沿交叉轴两侧均匀分布，间隔相等。

.container {
  display: flex;
  align-content: space-between;
}

Flex项目属性

除了设置Flex容器的属性之外，还可以通过设置Flex项目的属性来调整每个项目的布局和对齐方式。以下是一些常用的Flex项目属性：

1. `flex-grow`

flex-grow属性控制Flex项目在剩余空间上的分配比例，如果所有项目的flex-grow值为1，则它们会等分剩余空间。取值为数字，表示分配比例，默认为0。

.item {
  flex-grow: 2;
}

2. `flex-shrink`

flex-shrink属性定义了Flex项目在必须缩小时的缩小比例。取值为数字，默认为1。

.item {
  flex-shrink: 0;
}

3. `flex-basis`

flex-basis属性定义了在分配多余空间之前，项目的初始大小。可以设置为固定值（像素、百分比等）或auto。

.item {
  flex-basis: 100px;
}

4. `flex`

flex属性是flex-grow、flex-shrink和flex-basis的缩写，可以一次性设置这三个属性的值。

.item {
  flex: 1 0 auto;
}

5. `order`

order属性定义了Flex项目的排列顺序，取值为整数，值小的项目排在前面。默认值为0。

.item {
  order: 2;
}

案例演示

下面是一个简单的Flex布局案例，展示了如何使用Flex容器和Flex项目属性进行布局：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Layout</title>
<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.item {
  flex: 1;
  height: 100px;
  margin: 10px;
  text-align: center;
  line-height: 100px;
}
</style>
</head>
<body>
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
</body>
</html>

在这个案例中，通过设置.container为Flex容器，使用justify-content: center;和align-items: center;使Flex项目居中对齐。Flex项目.item设置为flex: 1;，实现了等分剩余空间的效果。