CSS Flexbox 指南

Flexbox 是 CSS3 中的一个强大的布局模型，它允许开发者以更简单的方式创建复杂的布局。本指南将介绍 Flexbox 的基本概念、属性和常用布局。

基本概念

Flexbox 允许容器内的元素灵活地伸缩，从而更好地适应不同屏幕尺寸和设备。以下是一些基本概念：

• 容器（Flex Container）：使用 display: flex; 或 display: inline-flex; 声明的元素。
• 项目（Flex Item）：容器内的子元素。
• 主轴（Main Axis）：容器的主方向，默认为水平方向。
• 交叉轴（Cross Axis）：垂直于主轴的方向。

属性

以下是一些常用的 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: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];：设置项目的伸缩性。

常用布局

一列布局

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

.item {
  flex: 1;
}

两列布局

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

.container {
  display: flex;
}

.item {
  flex: 1;
}

三列布局

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

.item {
  flex: 1;
}

扩展阅读

更多关于 Flexbox 的内容，请参考 CSS Flexbox 教程。

Flexbox 示例