介绍

CSS Flexbox（Flexible Box Layout）是一种用于在容器中分布、对齐和排列子元素的一维布局方法。它使创建复杂的响应式布局变得更加简单和直观。

Flexbox 的基本概念

Flexbox 包含两个主要组件：容器（flex container）和项目（flex items）。

  • 容器：设置为 `display: flex` 或 `display: inline-flex` 的元素。
  • 项目：容器内的直接子元素。

Flexbox 的常用属性

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

  • `display: flex;`：将元素设为弹性容器。
  • `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, space-evenly）。
  • `align-items`：定义项目在交叉轴上的对齐方式（flex-start, flex-end, center, baseline, stretch）。
  • `flex`：复合属性，可以简写为 `flex-grow`, `flex-shrink` 和 `flex-basis` 的组合。

案例讲解：创建响应式布局

下面是一个使用 Flexbox 创建响应式布局的示例。

HTML 代码


<div class="demo">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>

CSS 代码


.demo {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.demo .box {
background: #e0e0e0;
margin: 10px;
padding: 20px;
text-align: center;
flex: 1;
border: 1px solid #ccc;
}

@media (max-width: 768px) {
.demo {
flex-direction: column;
}
}

效果展示

Box 1
Box 2
Box 3

在上面的示例中，我们使用 Flexbox 创建了一个简单的响应式布局。默认情况下，三个盒子（Box 1, Box 2, Box 3）会在同一行显示，并且它们之间的间距是均匀的。当屏幕宽度小于 768 像素时，盒子会垂直排列。

总结

CSS Flexbox 是一种强大的布局工具，可以帮助我们更轻松地创建响应式布局。通过理解 Flexbox 的基本概念和常用属性，我们可以创建出各种复杂且灵活的布局。