使用flex盒子模型实现瀑布流布局

最新推荐文章于 2023-11-10 20:40:45 发布

七里香777

最新推荐文章于 2023-11-10 20:40:45 发布

阅读量3.1k

点赞数

分类专栏：笔记 # CSS 文章标签： css html

本文链接：https://blog.csdn.net/weixin_44286392/article/details/107124234

版权

笔记同时被 2 个专栏收录

45 篇文章 0 订阅

订阅专栏

CSS

15 篇文章 0 订阅

订阅专栏

这个例子主要用到弹性盒子（Flexible Box 或 flex-box）布局。

1.flex-box是CSS3新增的一种布局模式，相比传统的布局模式来说，它更简单好用，不存在浮动元素脱离正常文档流之后需要在某些地方清除浮动的问题。
2.flex-box是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
实现效果：
在这里插入图片描述

flex-wrap属性用于指定弹性盒子的子元素换行方式，当取值为wrap时让弹性盒元素在必要的时候换行，该属性当内容一行容不下的时候才有效，超出按父级的高度来平分
flex-grow 属性用于设置或检索弹性盒子的扩展比率，当取值为一个数字，该数字规定项目将相对于其他灵活的项目进行扩展的量，如果元素不是弹性盒对象的元素，则 flex-grow 属性不起作用
object-fit属性是为了处理替换元素的自适应问题，简单的说，就是处理替换元素的变形（这里指长宽比例变形）问题，利用该属性可以达到最佳最完美的居中自动剪裁图片的功能，当其属性值为cover时保持原始的尺寸比例，保证内容区域被填满。因此，可替换元素可能会被切掉一部分，从而不能完整展示。
nth-last-of-type(n)选择器，与此类似的有一个:nth-of-type(n)选择器，它匹配同类型中的第n个同级兄弟元素，n可以是一个数字，一个关键字，或者一个公式。而nth-last-of-type(n)选择器，因为有last，所以与:nth-of-type(n)选择器相反，它匹配同类型中的倒数第n个同级兄弟元素。
HTML <img>的alt属性：alt 属性是一个必需的属性，它规定在图像无法显示时的替代文本。假设由于一些原因（比如网速太慢、src 属性中的错误、浏览器禁用图像、用户使用的是屏幕阅读器）用户无法查看图像，alt 属性可以为图像提供替代的信息。（如果需要为图像创建工具提示，使用 title 属性）
关于盒子模型，了解更多：https://blog.csdn.net/miss_zxm/article/details/80271161
案例源码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>使用flex盒模型实现瀑布流布局</title>
	<style>
		*{padding: 0px;margin: 0px;}
		.box{display:flex;
			 flex-wrap: wrap;
		}
		.box img{flex-grow: 1; 
				 margin:5px;
				 height:200px;
				 object-fit: cover; 
		}

		@media (min-width: 1200px){
			/*nth-last-of-type(n) 选择器匹配属于父元素的特定类型的第n个子元素的每个元素，从最后一个子元素开始计数，n 可以是数字、关键词或公式*/
			.box img:nth-last-of-type(-n+5){
				flex-grow: 0
			}
		}
	</style>
</head>
<body>
	<div class="box">
		<img src="landscapes/01.jpg" alt="">
		<img src="landscapes/02.jpg" alt="">
		<img src="landscapes/03.jpg" alt="">
		<img src="landscapes/04.jpg" alt="">
		<img src="landscapes/05.jpg" alt="">
		<img src="landscapes/06.jpg" alt="">
		<img src="landscapes/07.jpg" alt="">
		<img src="landscapes/08.jpg" alt="">
		<img src="landscapes/09.jpg" alt="">
		<img src="landscapes/10.jpg" alt="">
		<img src="landscapes/11.jpg" alt="">
		<img src="landscapes/12.jpg" alt="">
		<img src="landscapes/13.jpg" alt="">
		<img src="landscapes/14.jpg" alt="">
		<img src="landscapes/15.jpg" alt="">
		<img src="landscapes/16.jpg" alt="">
		<img src="landscapes/17.jpg" alt="">
		<img src="landscapes/18.jpg" alt="">
		<img src="landscapes/19.jpg" alt="">
		<img src="landscapes/20.jpg" alt="">
		<img src="landscapes/21.jpg" alt="">
		<img src="landscapes/22.jpg" alt="">
		<img src="landscapes/23.jpg" alt="">
		<img src="landscapes/24.jpg" alt="">
		<img src="landscapes/25.jpg" alt="">
		<img src="landscapes/26.jpg" alt="">
		<img src="landscapes/27.jpg" alt="">
		<img src="landscapes/28.jpg" alt="">
		<img src="landscapes/29.jpg" alt="">
		<img src="landscapes/30.jpg" alt="">
	</div>


</body>
</html>

七里香777

关注

0
点赞
踩
11

收藏

觉得还不错? 一键收藏
1
评论
使用flex盒子模型实现瀑布流布局

这个例子主要用到弹性盒子（Flexible Box 或 flex-box）布局。1.flex-box是CSS3新增的一种布局模式，相比传统的布局模式来说，它更简单好用，不存在浮动元素脱离正常文档流之后需要在某些地方清除浮动的问题。flex-box是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。实现效果：flex-wrap属性用于指定弹性盒子的子元素换行方式
复制链接

扫一扫