Flex必须了解的那些事(Flex核心知识：你必须掌握的关键要点)

原创

ithorizon 6个月前 (10-21) 阅读数 26 #后端开发

Flex必须了解的那些事

一、Flex布局的基本概念

Flex布局，即弹性布局，是一种CSS3的布局方案，旨在更有效地对齐和分配容器内元素的空间，即使它们的大小是未知或动态变化的。以下是一些Flex布局的核心概念：

1. Flex容器（Flex Container）

使用Flex布局的父元素被称为Flex容器。通过设置容器的display属性为flex或inline-flex，可以使其成为Flex容器。


display: flex;

2. Flex项目（Flex Item）

Flex容器内的所有子元素自动成为Flex项目。项目可以灵活地伸缩以填充可用空间。

3. 轴线（Axis）

Flex布局中有两个重点的轴线：主轴（main axis）和交叉轴（cross axis）。主轴用于分配主轴方向上的空间，交叉轴用于分配交叉轴方向上的空间。

二、Flex容器的属性

Flex容器具有一系列属性，用于控制其子元素（Flex项目）的布局方案。

1. flex-direction

定义主轴的方向。


flex-direction: row | row-reverse | column | column-reverse;

2. flex-wrap

定义如果一行不足以放下所有项目，是否换行。


flex-wrap: nowrap | wrap | wrap-reverse;

3. flex-flow

是flex-direction和flex-wrap属性的简写形式。


flex-flow: <flex-direction> || <flex-wrap>;

4. justify-content

定义项目在主轴上的对齐方案。


justify-content: flex-start | flex-end | center | space-between | space-around;

5. align-items

定义项目在交叉轴上怎样对齐。


align-items: stretch | flex-start | flex-end | center | baseline;

6. align-content

定义多行之间的空间分配和对齐方案，只有当有多行时才会生效。


align-content: stretch | flex-start | flex-end | center | space-between | space-around;

三、Flex项目的属性

Flex项目也有一系列属性，用于控制其自身的大小和对齐方案。

1. order

定义项目的排列顺序。数值越小，排列越靠前，默认为0。


order: <integer>;

2. flex-grow

定义项目的放大比例，默认为0，即如果有剩余空间，也不放大。


flex-grow: <number>;

3. flex-shrink

定义项目的缩小比例，默认为1，即空间不足时，项目将等比例缩小。


flex-shrink: <number>;

4. flex-basis

定义项目的基础大小，默认为auto，即项目的本来大小。


flex-basis: <length> | auto;

5. flex

是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。


flex: <flex-grow> <flex-shrink>? || <flex-basis>?;

6. align-self

允许单个项目有与其他项目不一样的对齐方案，可以覆盖align-items属性。默认值为auto，描述继承父元素的align-items属性，如果没有父元素，则等同于stretch。


align-self: auto | flex-start | flex-end | center | baseline | stretch;

四、Flex布局的实际应用

以下是一些Flex布局在实际开发中的应用示例。

1. 布局容器

使用Flex布局创建一个易懂的布局容器，可以轻松地实现响应式设计。

项目1

项目2

项目3

2. 垂直居中

使用Flex布局可以轻松实现元素的垂直居中。

垂直居中的内容

3. 等高布局

Flex布局可以轻松实现等高布局，即使子元素内容不同，也能保持相同的高度。

较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的文本内容，较长的

文章标签：后端开发