样式篇——Flex弹性盒子布局（建议收藏）

2023-09-04 12:03:43

Flex 布局：掌控页面布局的新武器

在现代网页设计中，灵活性、响应性和易用性是至关重要的。Flex 布局横空出世，为这些需求提供了完美的解决方案，它是一种强大的布局系统，可帮助您轻松构建复杂的页面布局。本文将深入探讨 Flex 布局，涵盖其语法、属性、使用技巧以及常见的常见问题解答，让您充分掌握这种变革性的布局方法。

Flex 布局的语法

Flex 布局的语法很简单，由以下关键属性组成：

display: flex;：将元素设置为 Flex 容器。
flex-direction:：定义 Flex 容器中项目的排列方向，可以是水平（row）或垂直（column），或其反转。
flex-wrap:：控制项目是否换行，有三种选项：不换行（nowrap）、换行（wrap）和反向换行（wrap-reverse）。
justify-content:：调整 Flex 容器中项目的水平对齐方式，包括左对齐（flex-start）、居中（center）、右对齐（flex-end）、两端对齐（space-between）和周围对齐（space-around）。
align-items:：定义 Flex 容器中项目的垂直对齐方式，类似于水平对齐，有顶部对齐（flex-start）、居中（center）、底部对齐（flex-end）和拉伸（stretch）。
align-content:：设置换行轴上的对齐方式，适用于多行布局，有顶部对齐（flex-start）、居中（center）、底部对齐（flex-end）和拉伸（stretch）。

Flex 布局的属性

Flex 布局还提供了一系列属性来微调项目的行为：

flex-grow:：控制项目在分配剩余空间时的增长比例。
flex-shrink:：控制项目在空间不足时的收缩比例。
flex-basis:：指定项目的初始大小，在分配剩余空间之前使用。
order:：指定项目的排列顺序，覆盖 HTML 的 DOM 顺序。

Flex 布局的使用技巧

掌握了语法和属性之后，让我们看看如何将 Flex 布局应用到实际场景中：

垂直居中： 使用 justify-content: center; 和 align-items: center; 将项目垂直和水平居中。
两栏布局： 使用 flex-direction: row; 创建两栏布局，设置宽度并为每栏指定不同的背景颜色。
多列布局： 使用 flex-wrap: wrap; 实现多列布局，为每个项目设置相同的宽度和高度，并根据需要添加边距。
流式布局： 通过 justify-content: space-between; 和 flex-wrap: wrap; 创建流式布局，让项目自动填充可用空间，并根据容器宽度调整项目宽度。

代码示例

/* 垂直居中 */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 两栏布局 */
.container {
  display: flex;
  flex-direction: row;
}

.left {
  width: 50%;
  background-color: blue;
}

.right {
  width: 50%;
  background-color: green;
}

/* 多列布局 */
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.item {
  width: 200px;
  height: 200px;
  background-color: red;
  margin: 10px;
}

/* 流式布局 */
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item {
  width: calc((100% - 20px) / 3);
  height: 200px;
  background-color: red;
  margin: 10px;
}