[小廖搬砖日记]Flex伸缩盒子的实操+详解——flex-wrap属性

最新推荐文章于 2023-09-13 16:21:52 发布

Oreo奥利奥团队

最新推荐文章于 2023-09-13 16:21:52 发布

阅读量284

点赞数

分类专栏：小廖搬砖日记文章标签： flex css html css3 opengl

原文链接：https://blog.csdn.net/weixin_44743508/article/details/107103590

版权

小廖搬砖日记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Flex伸缩盒子的实操+详解——flex-wrap属性

flex-wrap属性定义，如果项目在一条轴线上排不下的话，如何进行换行，或者选择不换行。

flex-wrap属性定义了三种值，分别是：

nowrap （默认值）如果排不下不进行换行
wrap 进行换行，第一行在上面
wrap-reverse 进行换行，第一行在下面

代码实操

首先定义12个高为300px的矩形

index.html

<body>
	<div class="box">
		<div class="square">A</div>
		<div class="square">B</div>
		<div class="square">D</div>
		<div class="square">E</div>
		<div class="square">F</div>
		<div class="square">G</div>
		<div class="square">H</div>
		<div class="square">I</div>
		<div class="square">J</div>
		<div class="square">K</div>
		<div class="square">L</div>
        <div class="square">M</div>
		<div class="square">N</div>
	</div>
</body>

先不定义flex-wrap属性

demo.css

.square{
	height: 150px;
	width: 300px;
	border:1px solid #000;
	background-color: aqua;
	display: inline;
}

.box{
	display: flex;
	/* flex-direction: row; */
	flex-direction: row;
	/* flex-wrap: wrap; */
}

效果下图所示

在这里插入图片描述

若把flex-wrap属性的值改为wrap。

.box{
	display: flex;
	/* flex-direction: row; */
	flex-direction: row;
	flex-wrap: wrap; 
}

效果下图所示

在这里插入图片描述

可见12个矩形因排不下而换行了。

若把flex-wrap属性的值改为 wrap-reverse。

.box{
	display: flex;
	/* flex-direction: row; */
	flex-direction: row;
	flex-wrap: wrap-reverse; 
}

效果则变为第一行在下面。

在这里插入图片描述

Oreo奥利奥团队

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录