Flex - CSS

Flexbox 是一种用于布局的 CSS3 属性。使用 Flexbox 可以轻松实现动态和响应式的布局。

优势

• 易于使用
• 动态和响应式布局
• 更简单和更有效的空间分配
• 简化对齐和对齐间距的控制
• 提供更好的可读性和可维护性

基本概念

• Flex Container（flex 容器）：一个包含 flex 项目的父元素。
• Flex Items（flex 项目）：flex 容器中的子元素。
• Main Axis（主轴）：flex 容器的主要轴线。默认情况下为水平轴。
• Cross Axis（交叉轴）：与主轴垂直的轴线。默认情况下为垂直轴。

Flex 属性

• display: flex; - 将元素设置为 flex 容器。
• flex-direction: row | row-reverse | column | column-reverse; - 定义主轴方向。
• justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly; - 定义主轴上的对齐方式。
• align-items: flex-start | flex-end | center | baseline | stretch; - 定义交叉轴上的对齐方式。
• align-content: flex-start | flex-end | center | space-between | space-around | stretch; - 定义在交叉轴上多行之间的对齐方式。
• flex-wrap: nowrap | wrap | wrap-reverse; - 定义 flex 项目是否换行。
• flex-basis: <length> | auto; - 定义 flex 项目在主轴上的基准大小。
• flex-grow: ; - 定义 flex 项目在可用空间上占用的比例。
• flex-shrink: ; - 定义 flex 项目在不可用空间上占用的比例。

示例代码

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.item {
  width: 200px;
  height: 200px;
  margin: 10px;
  background-color: #4CAF50;
  color: white;
  font-size: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

结论

使用 Flexbox 可以轻松实现动态和响应式的布局，它极大地简化了对齐和间距的控制，并提供了更好的可读性和可维护性。掌握 Flexbox，将使您的 Web 开发更加高效和轻松。