Flexbox 简介

Flexbox 是 CSS3 中的一个布局模型，它提供了一种更加高效和灵活的方式来布局、对齐和分配容器中项目的空间，即使它们的大小是未知或者动态的。

Flexbox 基础概念

容器和项目

• 容器：一个使用 display: flex; 或 display: inline-flex; 的元素。
• 项目：容器内所有直接子元素。

主轴和交叉轴

• 主轴：Flex 容器的当前方向是主轴。
• 交叉轴：与主轴垂直的轴称为交叉轴。

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">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

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

.flex-item {
  background-color: #c0c0c0;
  margin: 10px;
  padding: 20px;
}

更多关于 Flexbox 的内容，请参阅我们的 Flexbox 深入指南。

图片展示

Flexbox 示例