CSS Flexbox 指南

Flexbox 是 CSS3 中用于布局的一种强大工具，它允许开发者更轻松地设计复杂的布局。以下是一些关于 CSS Flexbox 的基础知识和最佳实践。

Flexbox 基础

Flexbox 使用以下术语：

容器 (Container): 使用 display: flex; 或 display: inline-flex; 属性的元素。
项目 (Item): 容器内的元素。

以下是一些基本的 Flexbox 属性：

flex-direction: 定义项目的布局方向。
flex-wrap: 定义如果一行显示不下，如何换行。
flex-flow: flex-direction 和 flex-wrap 的简写属性。
justify-content: 定义项目在主轴上的对齐方式。
align-items: 定义项目在交叉轴上如何对齐。
align-content: 定义多根轴线的对齐方式。

实例

以下是一个简单的 Flexbox 实例：

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

.flex-container {
  display: flex;
  width: 300px;
  height: 100px;
  background-color: #f3f3f3;
}

.flex-item {
  background-color: #4CAF50;
  padding: 10px;
  margin: 5px;
}

扩展阅读

要了解更多关于 Flexbox 的信息，请访问我们的Flexbox 教程。

图片示例