Flexbox 是一种布局技术，用于在网页设计中创建灵活的布局。它允许开发者轻松地对容器内的元素进行排列和对齐，而无需复杂的CSS代码。

基本概念

  • 容器（Flex Container）：使用 display: flex; 或 display: inline-flex; 属性定义的元素。
  • 项目（Flex Item）：容器内的直接子元素。
  • 主轴（Main Axis）：项目的默认排列方向。
  • 交叉轴（Cross Axis）：垂直于主轴的轴线。

常用属性

  • flex-direction：设置主轴的方向，如 row（水平）和 column（垂直）。
  • justify-content：设置项目在主轴上的对齐方式，如 flex-start、flex-end、center、space-between 和 space-around。
  • align-items：设置项目在交叉轴上的对齐方式，如 flex-start、flex-end、center、stretch 和 baseline。
  • flex-wrap：设置是否允许项目换行，如 nowrap、wrap 和 wrap-reverse。
  • flex：设置项目的弹性大小，如 1、2、3 等。

实例

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

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

Flexbox 实例

更多 Flexbox 相关的教程，请访问我们的 Flexbox 教程页面。

总结

Flexbox 是一种强大的布局技术，可以帮助开发者更轻松地创建复杂的网页布局。通过合理使用 Flexbox 属性，你可以实现各种布局效果，提升网页的视觉效果。