Flexbox 指南

Flexbox 是 CSS 中用于创建灵活布局的强大工具。它允许我们轻松地在容器中排列元素，无论它们的大小如何变化。以下是一些关于 Flexbox 的基本概念和用法。

Flexbox 概念

Flexbox 中的容器被称为 flex container，而容器内的元素被称为 flex items。以下是一些重要的 Flexbox 属性：

display: flex; 或 display: inline-flex;：将元素设置为 flex 容器。
justify-content: flex-start;：flex 项在其容器中的起始位置。
align-items: center;：flex 项在其容器中的垂直居中。
flex-direction: row;：flex 项在其容器中的水平排列。

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;
  justify-content: space-around;
  align-items: center;
}

.flex-item {
  padding: 10px;
  background-color: #f0f0f0;
  margin: 5px;
}

响应式布局

<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;
  flex-wrap: wrap;
  justify-content: space-around;
}

.flex-item {
  flex: 1 1 200px; /* flex-grow, flex-shrink, flex-basis */
  margin: 5px;
}

扩展阅读

更多关于 Flexbox 的信息，请访问我们的 Flexbox 教程。