CSS Flex

Flex布局提供了一种高效且灵活的方式来在容器内布局、对齐和分布空间给元素。

在flexbox布局出现之前，设计师和开发者必须使用表格、float和position属性来创建复杂的布局。

Flexbox布局提供了一种简单的方法来创建响应式和动态设计，以适应各种屏幕尺寸和设备。

Flex容器和Flex项目

Flex容器和Flex项目是Flex布局背后的关键概念。

为了创建Flex布局，我们首先需要设置一个Flex容器。任何元素都可以通过display: flex声明设置为Flex容器。

Flex容器内的元素被称为Flex项目。容器内的可用空间可以有效地在Flex项目之间分配。

让我们看一个例子。

这里，大的purple框是Flex容器，其中包含三个orange框的Flex项目。

我们将在接下来的文章中了解更多关于Flex容器和Flex项目的内容。现在，让我们先看看一些基本的flexbox术语。

Flexbox术语

有各种术语来描述容器中Flex项目的排列方式。

下图展示了基本的flexbox术语。

这里，

• 主轴（main axis）：主轴是指Flex项目在Flex容器内排列的主要轴。它可以是水平或垂直方向。

主轴取决于flex-direction属性的值。

flex-direction属性的row值将主轴设置为水平方向，而column值将主轴设置为垂直方向。

在上图中，由于flex-direction属性设置为row，主轴是水平方向。

• 主开始和主结束（main start and main end）：主开始是主轴的起始边缘，主结束是结束边缘。换句话说，Flex项目沿着主轴开始和结束的位置。

• 主尺寸（main size）：主尺寸是指Flex项目在容器主轴上的尺寸。根据主轴是水平还是垂直，这可以是宽度或高度。

• 交叉轴（cross axis）：交叉轴是与主轴垂直的轴。如果主轴是水平的，交叉轴就是垂直的，反之亦然。

• 交叉开始和交叉结束（cross start and cross end）：这些是指Flex容器内交叉轴的开始和结束边缘。换句话说，Flex项目在交叉轴上开始和结束的位置。

• 交叉尺寸（cross size）：交叉尺寸是指Flex项目在容器交叉轴上的尺寸。同样，这可以是宽度或高度，取决于交叉轴的方向。

Flex布局涉及到Flex容器的属性以及其中Flex项目的属性。这些属性共同作用，控制项目的布局和对齐方式。

要了解更多，请访问CSS Flex容器和CSS Flex项目。

注意：Flexbox适用于单方向布局，即水平或垂直方向，而grid布局为同时涉及两个方向的复杂布局提供了强大的功能。