Flexbox 布局

1. 什么是 Flexbox？

Flexbox（Flexible Box Layout Module）是 CSS3 中引入的一种布局模式，旨在提供一种更有效的方式来布局、对齐和分配容器中的项目，即使在项目的尺寸未知或动态变化的情况下。Flexbox 特别适合用于创建响应式布局，因为它能够自动调整项目的尺寸和位置以适应不同的屏幕尺寸。

1.1 Flexbox 的核心概念

• 容器（Flex Container）：应用 display: flex 或 display: inline-flex 的元素。
• 项目（Flex Items）：容器内的直接子元素。
• 主轴（Main Axis）：Flexbox 布局的主方向，默认是水平方向（从左到右）。
• 交叉轴（Cross Axis）：与主轴垂直的方向，默认是垂直方向（从上到下）。

2. Flexbox 的基本属性

2.1 容器属性

2.1.1 display: flex

将一个元素设置为 Flex 容器。

.container {
  display: flex;
}

2.1.2 flex-direction

定义主轴的方向。

• row（默认）：从左到右。
• row-reverse：从右到左。
• column：从上到下。
• column-reverse：从下到上。

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

2.1.3 justify-content

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

• flex-start（默认）：项目靠主轴起点对齐。
• flex-end：项目靠主轴终点对齐。
• center：项目居中对齐。
• space-between：项目均匀分布，首尾项目靠边。
• space-around：项目均匀分布，每个项目两侧有相同的空间。

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

2.1.4 align-items

定义项目在交叉轴上的对齐方式。

• stretch（默认）：项目拉伸以填充容器。
• flex-start：项目靠交叉轴起点对齐。
• flex-end：项目靠交叉轴终点对齐。
• center：项目居中对齐。
• baseline：项目按基线对齐。

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

2.2 项目属性

2.2.1 flex-grow

定义项目的放大比例。

.item {
  flex-grow: 1;
}

2.2.2 flex-shrink

定义项目的缩小比例。

.item {
  flex-shrink: 0;
}

2.2.3 flex-basis

定义项目的初始尺寸。

.item {
  flex-basis: 100px;
}

2.2.4 align-self

定义单个项目在交叉轴上的对齐方式。

.item {
  align-self: flex-end;
}

3. 实践练习

3.1 创建一个简单的 Flexbox 布局

目标：创建一个包含三个项目的 Flexbox 布局，项目在主轴上居中对齐，在交叉轴上居中对齐。

HTML：

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

CSS：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  border: 1px solid #000;
}

.item {
  width: 100px;
  height: 100px;
  background-color: #f06;
  margin: 10px;
  text-align: center;
  line-height: 100px;
  color: #fff;
}

3.2 调整项目的大小

目标：使第一个项目占据剩余空间的一半，第二个项目占据剩余空间的四分之一，第三个项目保持原尺寸。

CSS：

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

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

4. 总结

Flexbox 是一个强大的布局工具，能够帮助你轻松创建复杂的布局。通过掌握 Flexbox 的基本属性和概念，你可以更高效地设计和实现响应式网页布局。

5. 进阶学习

• Grid 布局：学习 CSS Grid 布局，它与 Flexbox 结合使用可以创建更复杂的布局。
• 响应式设计：探索如何使用 Flexbox 创建适应不同屏幕尺寸的布局。
• 动画和过渡效果：结合 Flexbox 和 CSS 动画，创建动态的用户界面。

通过不断实践和探索，你将能够更深入地理解和应用 Flexbox 布局。