CSS Flexbox 简介

Flexbox 是 CSS3 中一种强大的布局模型，它可以使网页设计更加灵活且易于维护。Flexbox 可以轻松地实现响应式的布局，使内容能够自动适应不同屏幕大小和设备类型。

什么是 Flexbox？

Flexbox 是一种用于布局的 CSS 模块，它通过定义容器和其中的项目之间的关系来实现灵活的布局。Flexbox 提供了各种属性和方法，使得设计者可以轻松地控制盒状模型元素的位置、尺寸和顺序。

Flexbox 的特点

Flexbox 提供了以下几个重要的特点：

1. 简化布局：Flexbox 可以轻松解决常见布局问题，如垂直居中、等高列布局等，减少了开发者的工作量。

2. 弹性容器和弹性项目：Flexbox 提供了弹性容器和弹性项目的概念，容器内的项目可以根据需要自动伸缩、换行和对齐。

3. 自适应布局：Flexbox 可以轻松实现响应式布局，使得网页能够自动适应不同的屏幕大小和设备类型。

4. 顺序控制：Flexbox 允许开发者通过指定项目的顺序来改变 HTML 代码中的排列顺序，从而更好地控制页面布局。

使用 Flexbox

使用 Flexbox 很简单，只需使用一些简单的 CSS 属性就能实现灵活的布局。以下是一些常用的 Flexbox CSS 属性：

1. display: flex;：将容器声明为 Flexbox 布局。

2. flex-direction: row|column;：指定项目的排列方向，可以是水平方向（从左到右）或垂直方向（从上到下）。

3. justify-content: flex-start|flex-end|center|space-between|space-around;：定义项目在主轴上的对齐方式。

4. align-items: flex-start|flex-end|center|stretch|baseline;：定义项目在交叉轴上的对齐方式。

5. flex-grow: number;：定义项目的放大比例。

6. flex-shrink: number;：定义项目的缩小比例。

7. flex-basis: length|auto;：定义项目在主轴上的初始尺寸。

8. flex: none|auto|number;：简写属性，用于设置 flex-grow, flex-shrink, 和 flex-basis 属性的值。

示例代码

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.item {
  flex: 1;
}

以上示例代码演示了一个简单的 Flexbox 布局。容器中的项目通过使用 flex: 1; 属性来自动伸缩并均匀分布在容器内。