Flexbox 教程

Flexbox 是一种用于在网页上布局元素的工具，它允许开发者以更简单的方式实现复杂的布局。以下是一些关于 Flexbox 的基础教程。

Flexbox 基础

Flexbox 的核心概念是容器（container）和项目（item）。容器指的是使用 display: flex; 或 display: inline-flex; 属性的元素，而项目则是容器内的元素。

容器属性

flex-direction: 定义了项目的布局方向，如水平或垂直。
justify-content: 定义了项目在容器内的水平排列方式。
align-items: 定义了项目在容器内的垂直排列方式。
align-content: 定义了多行项目在容器内的垂直排列方式。

项目属性

order: 定义了项目的顺序，数值越小，项目越靠前。
flex-grow: 定义了项目的扩展比例。
flex-shrink: 定义了项目的收缩比例。
flex-basis: 定义了项目的初始大小。

实例

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

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

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

.item {
  flex: 1;
  margin: 10px;
  padding: 20px;
  background-color: #f0f0f0;
  text-align: center;
}

扩展阅读

更多关于 Flexbox 的内容，请访问我们的 Flexbox 官方文档。