Flexbox 概述

Flexbox 是 CSS3 中的一个布局模型，用于在容器中轻松地布局、对齐和分配空间给其子元素。它提供了比传统布局模型更灵活和强大的布局能力。

Flexbox 基本概念

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

Flexbox 属性

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

• display: flex; 或 display: inline-flex;：将元素设置为容器。
• 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 | baseline | stretch;：设置交叉轴上的项目对齐方式。
• align-content: flex-start | flex-end | center | space-between | space-around | stretch;：设置交叉轴上的多行对齐方式。
• flex-wrap: nowrap | wrap | wrap-reverse;：设置是否换行。
• flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];：设置项目的扩展、收缩和基础大小。

Flexbox 实例

以下是一个简单的 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;
}

.item {
  width: 100px;
  height: 100px;
  background-color: #f0f0f0;
}

在上面的例子中，.container 是 Flex 容器，.item 是 Flex 项目。项目在容器中均匀分布。

扩展阅读

想了解更多关于 Flexbox 的知识？请访问我们的 Flexbox 教程 页面。