css中弹性布局（flex）的属性汇总

最新推荐文章于 2024-09-05 15:24:20 发布

前端小问题

最新推荐文章于 2024-09-05 15:24:20 发布

阅读量973

点赞数

CC 4.0 BY-SA版权

分类专栏： flex 文章标签： css css3 html5 html 前端

本文链接：https://blog.youkuaiyun.com/weixin_43989837/article/details/105511615

flex 专栏收录该内容

2 篇文章

订阅专栏

本文深入讲解Flex弹性布局的原理及应用，包括主轴与交叉轴的定义，如何使用display:flex开启弹性盒子，以及flex-direction、flex-wrap、justify-content、align-items和align-content等属性的作用与配置方法。

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

<html>
	<head>
		<title>flex弹性布局</title>
		<style type="text/css">
			/*使用弹性布局首先需要开启弹性盒子*/
			/*这里有一个主轴和交叉轴,主轴指的是x轴,交叉轴指的是y轴*/
			.box{
				display: flex; 
				/*如果是行级元素需要使用  display: inline-flex;*/
				/*Webkit 内核的浏览器，必须加上-webkit前缀。display: -webkit-flex;*/
				/*使用弹性布局之后  float clean vertical-align等css属性不在起效*/
				flex-direction: row | row-reverse | column | column-reverse;  /*这里需要确定弹性布局主轴的方向四选一*/
				/*row（默认值）：主轴为水平方向，起点在左端。
				row-reverse：主轴为水平方向，起点在右端。
				column：主轴为垂直方向，起点在上沿。
				column-reverse：主轴为垂直方向，起点在下沿。*/
				 flex-wrap: nowrap | wrap | wrap-reverse;  /*这里是定义如果一横排放不下子元素怎么办*/
				 /*nowrap（默认）：不换行。
				  * wrap：换行，第一行在上方。
				  * wrap-reverse：换行，第一行在下方。*/
				justify-content: flex-start | flex-end | center | space-between | space-around;	
				/*justify-content属性定义了项目在主轴上的对齐方式，也就是x轴上的*/
				/*flex-start（默认值）：左对齐
				flex-end：右对齐
				center： 居中
				space-between：两端对齐，项目之间的间隔都相等。
				space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。*/
				 align-items: flex-start | flex-end | center | baseline | stretch;
				 
				 
				 
				 /*align-items属性定义项目在交叉轴上如何对齐。也就是y轴上面的对齐方式*/
				/*flex-start：交叉轴的起点对齐。
				flex-end：交叉轴的终点对齐。
				center：交叉轴的中点对齐。
				baseline: 项目的第一行文字的基线对齐。
				stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。*/
				
				
				
				align-content: flex-start | flex-end | center | space-between | space-around | stretch;
				/*align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。*/
				/*flex-start：与交叉轴的起点对齐。
				flex-end：与交叉轴的终点对齐。
				center：与交叉轴的中点对齐。
				space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
				space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
				stretch（默认值）：轴线占满整个交叉轴。*/
			}
			.box1{
				display: flex;
				width: 500px;
				background: red;
			}
			.child{
				border: 1px solid green;
				 order: <integer>;  
				 /*这里需要给每一个子元素添加标号,会根据你所填写的标号从小到大重新排序*/
				flex-grow:2; 
				/*就是每个子元素所占的份数如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。*/
				flex-shrink: <number>; /* 需要跟一个number的类型的数字 */
				/*如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。*/
				flex-basis: <length> | auto; /* default auto */
				/*flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。*/
				flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];
				/*该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
				建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。*/
				align-self: auto | flex-start | flex-end | center | baseline | stretch;
				/*align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。*/

			}
			.child:first-child{
				flex-grow:1;
			}
			.one{
				order: 1;
			}
			.two{
				order: 2;
			}
			.three{
				order: 5;
			}
			.four{
				order: 4;
			}
			.five{
				order: 3;
			}
			
			
		</style>
		
	</head>
	<body>
		<div class="box1">
			<div class="child one">
				1
			</div>
			<div class="child two">
				2
			</div>
			<div class="child three">
				3
			</div>
			<div class="child four">
				4
			</div>
			<div class="child five">
				5
			</div>
		</div>
		
		
	</body>
</html>