css3-flex布局：基础使用 / Flexbox布局

一、理解flex

二、理解Flex布局（又称Flexbox布局）

Flex布局（又称Flexbox布局）是一种基于Web的CSS3布局模式，其目的是为了更加灵活和自适应地布置各种各样的网页元素。Flex布局通过将一个父容器分割为一个或多个弹性项目，使得这些项目能够按照一定规则相互排列，并且自动适应它们所处的容器环境。

在Flex布局中，父容器成为“flex container”，子元素成为“flex item”。Flex容器有两个重要的属性：flex-direction和justify-content。flex-direction主要用来决定flex item在主轴上的排列方向，而justify-content则用来对flex item进行主轴方向上的对齐。

除了这些基本属性之外，Flex布局还具有许多其他的属性，例如：align-items、align-content、flex-wrap、order、flex-grow、flex-shrink等。这些属性用来定义flex item在交叉轴和主轴上的排序方式以及它们在父容器中所占的空间大小。

flex布局是一种比较高级的网页排版技术，它能够帮助开发者轻松地实现复杂的网页布局效果，并且具有灵活和响应式的特点。

三、设置了 flex 布局后，以下属性将失效

序号	属性	备注
1	float
2	clear
3	vertical-align	在 Flex 容器中只能用于对齐 Flex 项目中的内联元素或文字
4	display:inline-block
5	width	可以在 Flex 项目上设置
6	height	可以在 Flex 项目上设置
7	margin: auto	在 Flex 容器上无法将 Flex 项目水平居中，需要使用justify-content:center实现
8	flex-direction: row	该属性被设置为默认值flex-direction: row，如果需要更改主轴方向，应该使用flex-direction属性
9	flex-wrap: nowrap	该属性被设置为默认值flex-wrap:nowrap，如果需要实现换行或不换行，应该使用flex-wrap属性
10	justify-content: flex-start	该属性被设置为默认值，如果需要更改主轴方向上的对齐方式，应该使用justify-content属性
注意：这并不是绝对的，还取决于具体的属性值和 Flex 项目的结构。有些情况下上述属性仍然可以正常使用

四、Flex布局有以下核心概念

4.1、Flex容器（Flex Container）：应用了 Flex 布局的元素，称为 Flex 容器。其作用是定义 Flex 项目所在的容器，使 Flex 项目能够进行弹性布局。

4.2、Flex项目（Flex Item）：Flex 容器中的子元素称为 Flex 项目（Flex Item），每个 Flex 项目都具有弹性盒的属性。同时，它们也受到 Flex 容器的限制，如放置的方向、排列顺序等。

4.3、Flex轴（Main Axis）：Flex 容器主要的放置方向即为 Flex 轴。在该轴上，Flex 容器中的 Flex 项目会被依次排列。

4.4、Flex交叉轴（Cross Axis）：与 Flex 轴垂直的轴称为 Flex 的交叉轴。在该轴上，Flex 项目所占据的空间是有限制的，具体大小由 Flex 容器的属性决定。

4.5、主轴方向属性（justify-content）：该属性用于控制 Flex 项目在 Flex 轴上的对齐方式。它可以让 Flex 项目在主轴方向上看起来更加美观，通常被用于实现水平对齐或垂直对齐。

4.6、交叉轴方向属性（align-items）：该属性用于控制 Flex 项目在交叉轴上的对齐方式。它可以让 Flex 项目在交叉轴方向上看起来更加美观，通常被用于实现水平对齐或垂直对齐。

4.7、弹性元素属性（flex）：该属性用于控制 Flex 项目如何分配 Flex 容器中可用空间。该属性的值决定了 Flex 项目的伸缩性，它能够让 Flex 项目在 Flex 容器中的尺寸发生变化，以适应不同的屏幕尺寸或者容器大小。

五、Flex容器

Flex容器是包含Flex项目的父级元素，通过设置该元素的display属性为flex或inline-flex，即可创建一个Flex容器。

序号	属性	属性描述	值	值描述
1	display	指定容器为Flex布局	flex	主轴水平方向排列
			inline-flex	主轴垂直方向排列
2	flex-direction	指定主轴的方向	row	从左到右
			row-reverse	水平方向（从右到左）
			column	垂直方向（从上到下）
			column-reverse	垂直方向（从下到上）
3	justify-content	指定主轴上的对齐方式	flex-start	靠近起点对齐
			flex-end	靠近终点对齐
			center	居中对齐
			space-between	两端对齐
			space-around	间隔对齐
4	align-items	指定交叉轴上的对齐方式	flex-start	靠近起点对齐
			flex-end	靠近终点对齐
			center	居中对齐
			baseline	基线对齐
			stretch	拉伸对齐
5	align-content	指定多根轴线的对齐方式(仅当交叉轴为多根轴线时有效)	flex-start	多行项目对齐于交叉轴的起始位置
			flex-end	多行项目对齐于交叉轴的结束位置
			center	多行项目在交叉轴上居中对齐
			space-between	多行项目在交叉轴上平均分布，首尾项目对齐于容器两端，项目之间的距离相等。
			space-around	多行项目在交叉轴上平均分布，项目之间的距离相等，首尾项目距离容器两端的距离是其他项目之间距离的一半
			stretch	多行项目在交叉轴上拉伸以充满容器的高度。
6	flex-wrap	指定元素是否换行	nowrap	不换行
			wrap	换行
			wrap-reverse	反向换行
7	flex-flow	用于同时设置 flex 容器的主轴和交叉轴的方向和排列方式，它是 flex-direction 和 flex-wrap 两个属性的缩写	row	主轴为水平方向，起点在左端
			row-reverse	主轴为水平方向，起点在右端
			column	主轴为垂直方向，起点在上方
			column-reverse	主轴为垂直方向，起点在下方
			wrap	换行，第一行在上方
			wrap-reverse	换行，第一行在下方
			nowrap	不换行，所有元素排在一行上
			inherit	从父元素继承值
8	align-self	设置单个项目在交叉轴上的对齐方式	auto	默认值，元素继承父元素在交叉轴方向上的对齐方式
			flex-start	元素在交叉轴的起点对齐
			flex-end	元素在交叉轴的终点对齐
			center	元素在交叉轴的中心对齐
			baseline	元素在交叉轴上以基线对齐
			stretch	将元素在交叉轴上拉伸至撑满整个交叉轴

六、Flex项目

Flex项目是Flex容器中的子元素，通过设置该元素的flex属性，即可使其成为一个Flex项目。

序号	属性	属性描述
1	justify-content	控制项目在主轴上的对齐方式
2	align-items	控制项目在交叉轴上的对齐方式
3	flex-direction	控制主轴的方向
4	flex-wrap	控制项目在一行内排列不下时的换行方式
5	align-content	控制多行项目在交叉轴上的对齐方式
6	flex-grow	表示Flex项目在空间分配时的放大比例。 flex-grow的默认值为0，数值越大，空间分配越多。
7	flex-shrink	表示Flex项目在空间不足时的缩小比例。 flex-shrink的默认值为1，数值越大，缩小比例越多，设置为 0 不缩放 。
8	flex-basis	表示Flex项目在空间分配前的初始大小。 flex-basis的默认值为auto，可以设置具体数值或百分比。
9	order	表示Flex项目在容器中的排列顺序。 order的默认值为0，数值越小，排列越靠前。可以使用负数值。
10	flex	是flex-grow, flex-shrink 和flex-basis的缩写，可以一次性设置以上三个属性 是flex-gflex的默认值为0 1 auto。

七、DEMO / vue3.3 + ts

7.1、水平、垂直 居中

 

<template><div class="container"><!-- 水平、垂直 居中 --><div class="flex"><div class="flex_item"></div></div></div>
</template><script setup lang="ts">
</script><style scoped lang="less">
.container{.flex{display: flex;justify-content: center; // 水平居中align-items: center; // 垂直居中width: 200px;height: 200px;background: #ff0000;&_item{width: 50px;height: 50px;background: #b3de1b;}}
}
</style>

7.2、flex-shrink

<template><div class="container"><div class="flex"><div class="flex_item">1</div><div class="flex_item">2</div><div class="flex_item">3</div><div class="flex_item">4</div><div class="flex_item">5</div><div class="flex_item">6</div><div class="flex_item">7</div></div></div>
</template><script setup lang="ts">
</script><style scoped lang="less">
.container{.flex{display: flex;width: 200px;height: 200px;background: #ff0000;&_item{width: 50px;height: 50px;background: #b3de1b;flex-shrink: 0; // 表示Flex项目在空间不足时的缩小比例。flex-shrink的默认值为1，数值越大，缩小比例越多，设置为 0 不缩放 。}}
}
</style>

7.3、flex-wrap: wrap; / 换行

7.4、 align-content: flex-start; / 多行项目对齐于交叉轴的起始位置

 

八、过程记录

8.1、display flex 和 inline-flex区别

display	flex	inline-flex
布局方向不同	display:flex是主轴水平方向排列	display:inline-flex是主轴垂直方向排列
元素占用空间不同	display:flex元素会占据一行（即父元素宽度）	display:inline-flex元素只占据它所包含内容的空间
默认属性不同	display:flex默认属性是flex-direction:row	display:inline-flex默认属性是flex-direction:row-reverse
元素排列方式不同	display:flex元素默认排列方式为flex-start	display:inline-flex元素默认排列方式为baseline

参考链接

Flex 布局语法教程 | 菜鸟教程

30 分钟学会 Flex 布局 - 知乎

flex布局（详解）_杰杰坚强的博客-CSDN博客

flex布局详细教程

处理：end value has mixed support, consider using flex-end instead_星月I随心的博客-CSDN博客