Flexbox 布局教程

Flexbox 是一种在网页设计中非常流行的布局方式，它允许开发者轻松地创建复杂的布局。下面是一些关于 Flexbox 布局的入门教程。

基础概念

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

属性

• flex-direction: 定义项目的布局方向，如 row（默认值）, row-reverse, column, column-reverse。
• flex-wrap: 定义如果一行显示不下，如何换行，如 nowrap（默认值）, wrap, wrap-reverse。
• justify-content: 定义项目在主轴上的对齐方式，如 flex-start, flex-end, center, space-between, space-around。
• align-items: 定义项目在交叉轴上如何对齐，如 flex-start, flex-end, center, stretch。
• align-content: 定义多行项目在交叉轴上的对齐方式。

示例

假设我们有一个包含三个元素的容器：

<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>

我们可以使用以下 CSS 来设置布局：

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

.flex-item {
  width: 100px;
  height: 100px;
  background-color: lightblue;
}

这将创建一个水平布局，其中每个项目都均匀分布在容器中。

扩展阅读

想要了解更多关于 Flexbox 的知识，可以阅读Flexbox 教程。

图片示例

灵巧布局示例

以上是 Flexbox 布局的简单介绍。希望这个教程能帮助您更好地理解和使用 Flexbox。