一文搞懂 CSS Flexbox 布局 - 2024年最新版，2024年五面蚂蚁

CSS Flexbox（弹性盒子）是一种现代化的布局模型，主要用于在不同尺寸的屏幕上提供一致的用户体验。Flexbox 提供了一种更简单的方法来创建灵活的布局，无论是列或行方向，都可以很好地进行调整。

以下是一个简单的Flexbox布局示例，它将创建一个水平排列的项目列表：

.container {
  display: flex; /* 使用 Flexbox 布局 */
  justify-content: center; /* 水平居中所有子元素 */
  align-items: center; /* 垂直居中所有子元素 */
}
 
.item {
  margin: 5px; /* 设置元素之间的间隔 */
  padding: 10px; /* 设置元素内部间隔 */
  background-color: #f0f0f0; /* 设置背景色 */
}

<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; 属性来指定使用 Flexbox 布局。.item 类则用于定义子元素的样式。justify-content 和 align-items 属性分别用于控制水平和垂直对齐方式。

Flexbox 还提供了很多其他的属性，如 flex-direction 来控制布局的方向（列或行），flex-wrap 来处理项目在空间不足时的换行情况，以及 flex-grow, flex-shrink, 和 flex-basis 来控制项目的伸缩行为等。