CSS Flexbox 教程

Flexbox 是 CSS3 中的一种布局方式，它提供了一种更加灵活和高效的方式来对容器内的元素进行布局。本教程将带您深入了解 Flexbox 的基本概念和用法。

基本概念

Flexbox 允许容器（flex container）内的元素能够灵活地伸缩，以适应不同屏幕尺寸和布局需求。以下是一些 Flexbox 中的基本概念：

• 容器（Flex Container）：设置了 display: flex; 或 display: inline-flex; 的元素。
• 项目（Flex Item）：在容器中的元素。
• 主轴（Main Axis）：容器的主轴方向，决定了项目的排列方式。
• 交叉轴（Cross Axis）：垂直于主轴的轴，决定了项目的垂直排列方式。

Flexbox 属性

以下是一些常用的 Flexbox 属性：

• flex-direction：设置主轴的方向。
• flex-wrap：设置是否换行。
• justify-content：设置主轴上的对齐方式。
• align-items：设置交叉轴上的对齐方式。
• align-content：设置多行项目的交叉轴对齐方式。

实例

以下是一个简单的 Flexbox 实例，展示了如何使用 Flexbox 来布局容器内的元素：

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

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

.flex-item {
  margin: 10px;
  padding: 20px;
  background-color: #f3f3f3;
  border: 1px solid #ccc;
}

在上面的例子中，.flex-container 是容器，.flex-item 是项目。容器设置了 display: flex;，这使得容器内的元素可以根据需要伸缩。

Flexbox 实例

扩展阅读

如果您想了解更多关于 Flexbox 的信息，请阅读以下文档：

• MDN Flexbox Guide

希望这个教程能帮助您更好地理解 Flexbox。祝您学习愉快！