Flex的常用布局汇总，及对比,思维导图

周百万.

已于 2022-03-20 22:07:35 修改

阅读量446

点赞数 1

CC 4.0 BY-SA版权

分类专栏： CSS 思维导图文章标签： html css3 css

于 2022-03-19 14:01:54 首次发布

本文链接：https://blog.csdn.net/m0_45142186/article/details/123593895

CSS 同时被 2 个专栏收录

16 篇文章

订阅专栏

思维导图

4 篇文章

订阅专栏

本文详细介绍了Flex布局的主要属性，包括`flex-direction`（主轴方向）、`flex-wrap`（换行设置）、`flex-flow`（复合属性）、`justify-content`（主轴排列方式）、`align-content`（侧轴多行排列）和`align-items`（侧轴单行排列）。通过这些属性，开发者可以灵活地控制元素在容器中的布局和对齐，实现各种复杂的网页和应用布局设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

做图不易取图请@ thanks

flex布局
	flex-direction:设置主轴方向
		row:从左向右（默认值）
		row-reverse:从右向左
		column:从上到下
		column-reverse:从下到上
	flex-wrap：子元素是否换行
		wrap:换行
		nowrap:不换行
	flex-flow：复合属性
		flex-flow:row wrap
	justify-content：设置主轴上子元素的排列方式
		主轴是X轴
			flex-start:从左到右
			flex-end:从右向左
			center：水平居中
			space-around:平分剩余空间
			space-between:先两边贴边，再平分剩下的部分
			
		主轴是Y轴
			flex-start:从上到下
			flex-end:从下到上
			center：垂直居中
			space-around:平分剩余空间
			space-between:先两边贴边，再平分剩下的部分
	align-content：侧轴上子元素的排列方式（多行）
		flex-start:在侧轴的头部开始排列
		flex-end:在侧轴的尾部开始排列
		center:侧轴中间显示
		space-around:子项在侧轴平分剩余空间
		space-between:现分布在两头，再平分剩余部分
		stretch:子项元素平分父亲高度
	align-items：侧轴上子元素的排列方式（单行）
		flex-start:从上到下
		flex-end:从下到上
		center:挤在一起居中（垂直居中）
		stretch:拉伸