CSS Flexbox 教程

Flexbox 是 CSS3 中用于布局的一种强大工具，它能够轻松实现复杂的布局效果。下面将详细介绍 Flexbox 的基本概念和使用方法。

Flexbox 基本概念

Flexbox 主要包含以下几个概念：

• 容器（Flex Container）：使用 display: flex; 或 display: inline-flex; 声明的元素。
• 项目（Flex Item）：容器内的所有子元素。
• 主轴（Main Axis）：Flex 容器的主轴方向。
• 交叉轴（Cross Axis）：垂直于主轴的方向。

Flexbox 常用属性

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

• flex-direction：设置主轴的方向，如 row（默认）、row-reverse、column、column-reverse。
• justify-content：设置项目在主轴上的对齐方式，如 flex-start、flex-end、center、space-between、space-around。
• align-items：设置项目在交叉轴上的对齐方式，如 flex-start、flex-end、center、stretch。
• flex-wrap：设置项目是否换行，如 nowrap（默认）、wrap。
• align-content：设置多根轴线的对齐方式，如 flex-start、flex-end、center、space-between、space-around、stretch。

示例

以下是一个简单的 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 {
  width: 100px;
  height: 100px;
  background-color: #f00;
}

扩展阅读

如果您想了解更多关于 Flexbox 的知识，可以阅读以下文章：

• CSS Flexbox Guide

希望这篇教程能帮助您更好地理解和使用 Flexbox。😊