Flex布局简介

Flexbox，即弹性盒子模型，是一种现代的网页布局模式，它为各种大小的屏幕和不同设备提供了强大的空间分布和对齐能力，Flex布局允许内部元素根据容器的空间自动伸缩和重新排列，从而简化了许多复杂的布局任务。

基本属性

在Flex布局中，有两个主要的角色：容器（父元素）和项目（子元素），以下是它们各自的属性：

容器属性

1、display: 设置为flex或inlineflex以启用Flex布局。

2、flexdirection: 定义主轴的方向，可以是row（默认）、rowreverse、column或columnreverse。

3、flexwrap: 定义项目是否换行，可以是nowrap（默认）、wrap或wrapreverse。

4、flexflow: 是flexdirection和flexwrap的简写形式。

5、justifycontent: 定义项目在主轴上的对齐方式，可以是flexstart、flexend、center、spacebetween或spacearound。

6、alignitems: 定义项目在交叉轴上的对齐方式，可以是stretch（默认）、flexstart、flexend、center或baseline。

7、aligncontent: 定义多行情况下，项目在交叉轴上的对齐方式，可以是stretch（默认）、flexstart、flexend、center、spacebetween或spacearound。

8、flexgrow: 定义项目的放大比例，当存在剩余空间时，项目将按此比例放大。

9、flexshrink: 定义项目的缩小比例，当空间不足时，项目将按此比例缩小。

10、flexbasis: 定义项目在分配多余空间之前的默认大小。

项目属性

1、order: 定义项目的排序顺序。

2、flexgrow: 与容器中的flexgrow相同，但仅影响特定项目。

3、flexshrink: 与容器中的flexshrink相同，但仅影响特定项目。

4、flexbasis: 与容器中的flexbasis相同，但仅影响特定项目。

5、flex: 是flexgrow、flexshrink和flexbasis的简写形式。

6、alignself: 允许项目覆盖容器的alignitems属性，可以是auto（默认）、flexstart、flexend、center、baseline或stretch。

示例表格

下面是一个展示容器和项目属性的表格：

相关问答FAQs

类别	属性	值	描述
容器	display	flex	启用Flex布局
容器	flexdirection	row	设置主轴方向为水平
容器	flexwrap	wrap	允许项目换行
容器	justifycontent	center	项目在主轴上居中对齐
容器	alignitems	stretch	项目在交叉轴上拉伸以填充容器
容器	aligncontent	spacebetween	多行项目在交叉轴上均匀分布
项目	order	1	项目的排序顺序
项目	flexgrow	1	项目可以放大的比例
项目	flexshrink	1	项目可以缩小的比例
项目	flexbasis	auto	项目分配多余空间前的初始大小
项目	flex	1 1 auto	flexgrow、flexshrink和flexbasis的简写
项目	alignself	auto	允许项目覆盖容器的交叉轴对齐方式

Q1: 如果我想要一个项目始终在最前面显示，不管其他项目如何排列，我应该怎么设置？

A1: 你可以使用项目的order属性来实现这个效果，将该项目的order属性值设置为一个较小的数字（1），而其他项目的order保持默认值0或更高的数字。

Q2: 我设置了alignitems: center;，但项目并没有在交叉轴上居中，这是为什么？

A2: alignitems: center;只会在交叉轴上居中对齐单行的项目，如果你有多行项目并且想要在交叉轴上居中对齐，你应该使用aligncontent: center;来实现这一效果。

分享文章：flex布局有哪些属性
转载来源：https://chengdu.cdxwcx.cn/article/cdcgpgc.html