Flex 变更单 - CSS

Flexbox（弹性盒布局）是 CSS3 的模块之一，提供了一种更加灵活的方式来布局元素，特别适用于构建响应式页面。

基本概念

Flexbox 有两个概念：容器（display: flex;）和一个或多个子元素。以下是 Flexbox 的基本概念：

1. 容器：使用 display: flex; 声明容器，它是父级元素，包含多个子元素。
2. 主轴和侧轴：Flexbox 中的主轴指的是容器的方向，而侧轴垂直于主轴。默认情况下，主轴为水平方向（从左到右），侧轴为垂直方向（从上到下）。
3. 子元素：容器包含的子元素称为“项目”，每个项目都有一个 flex 属性，决定它在容器中的大小。

Flex 属性

Flexbox 容器内的每个项目都包含几个重要的属性。以下是一些常用的属性：

1. flex-grow：控制项目如何放大，取值为正整数。
2. flex-shrink：控制项目如何缩小，取值为正整数。
3. flex-basis：定义项目在分配多余空间之前占据的主轴空间（即起始尺寸）。
4. flex：这是一个简写属性，包含 flex-grow, flex-shrink, 和 flex-basis。
5. order：定义项目的排列顺序，在容器中数值越小，排列越靠前。

Flexbox 布局

Flexbox 提供了两种布局模式：水平布局和垂直布局。以下是关于 Flexbox 布局的简要介绍：

水平布局

在水平布局中，Flexbox 项目沿着容器的主轴水平排列。如果容器内的项目宽度不能自动调整，则可以使用 flex-wrap 属性设置项目是否允许换行。

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

垂直布局

在垂直布局中，Flexbox 项目沿着容器的侧轴垂直排列。可以使用 flex-direction 属性设置主轴方向为垂直方向。

.container {
  display: flex;
  flex-direction: column;
}

兼容性

Flexbox 可以很好地兼容主流浏览器和移动端设备。但是，对于一些老版本浏览器，可能需要使用不同的前缀或者不支持某些属性。

总结

Flexbox 为开发者提供了布局灵活性和响应式设计的能力。使用 Flexbox，可以更加自由地控制元素的排列方式，从而构建出更加适应不同终端的网站或应用。