前端flex布局和grid布局

最新推荐文章于 2024-08-16 14:53:15 发布
最新推荐文章于 2024-08-16 14:53:15 发布
阅读量516 收藏 3
点赞数
分类专栏： 前端布局基础 文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46065861/article/details/119278747
版权
本文详细介绍了前端布局中的flex布局和grid布局。flex布局中详细讲解了flex-direction、flex-wrap、justify-content、align-items等属性，以及order、flex-grow、flex-shrink、flex-basis等项目属性。grid布局部分阐述了display: grid的使用，grid-template-rows和grid-template-columns的定义，以及justify-items、align-items等对齐方式。文章提供了阮一峰的教程链接作为进一步学习资源。
摘要由CSDN通过智能技术生成

9.flex布局

9.1定义弹性盒子

特点：自动计算宽高和不换行

在父容器样式里面写上

.box{
   
    display:flex;
    display:-webkit-flex;
}

设置弹性盒子的兼容性

  • ​ -webkit-谷歌内核
    ​ -moz- 火狐
    ​ -o- 欧鹏
    ​ -ms- IE

9.2容器属性

有以下几个

可参照弹性盒子布局(阮一峰)

https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

9.2.1flex-direction 定义子项的顺序

​ row(默认):起点在左边，水平排列

9.2.2.1.row-reverse:主轴为水平方向，起点在右端
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		*{
     
			margin: 0;
			padding: 0;
		}
		/* 
		定义弹性盒子flex
		
		 容器的属性
			flex-direction 定义子项的顺序
				row(默认):起点在左边，水平排列
				row-reverse:主轴为水平方向，起点在右端
				column:垂直排列,起点在面
				column-reverse:垂直排列,起点下面
			
			flex-wrap:定义子项是否换行
				nowrap不换行
				wrap换行
				wrap-reverse换行(倒叙)
			
			flex-flow:flex-direction flex-wrap(是排列顺序列和换行的复合)
			
			justify-content定义子项目横向对齐方式(横轴)
				flex-start(默认值):左对齐
				flex-end:右对齐
				center:居中
				space-between:两端对齐，项目之间有间隔
				space-around:每个项目两侧的间隔相等。所有项目之间的间隔比项目与边框的间隔大一倍
			
			align-items:定义纵向的对齐方式(纵轴方向)
				flex-start:交叉轴的起点(顶部)对齐
				flex-end:交叉轴的重点(底部)对齐
				center:交叉轴的中点对齐
				baseline:项目的第一行文字的基线对齐
				stretch(默认值):如果项目没有设置宽高或则为auto,沾满这个容器的高度
		 */
		div.box{
     
			width: 1200px;
			height: 500px;
			border: 1px solid black;
			margin: 0 auto;
			/* 设置弹性盒子
				-webkit-谷歌内核
				-moz- 火狐
				-o- 欧鹏
				-ms- IE
				
			 */
			display: flex;
			display: -webkit-flex;
			flex-direction: row-reverse;
		}
		div.box>div{
     
			width: 380px;
			height: 480px;
			background: #ffaa00;
			margin: 10px;
		}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="d1">1</div>
			<div class="d1">2</div>
			<div class="d1">3</div>
			<div class="d1">4</div>
			<!-- <div class="d1">5</div>
			<div class="d1">6</div>
			<div class="d1">7</div>
			<div class="d1">8</div>
			<div class="d1">9</div>
			<div class="d1">10</div> -->
		</div>
	</body>
</html>

image-20210722180805463

9.2.2.2.column：主轴为垂直方向，起点在上沿。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		*{
     
			margin: 0;
			padding: 0;
		}
		/* 
		定义弹性盒子flex
		
		 容器的属性
			flex-direction 定义子项的顺序
				row(默认):起点在左边，水平排列
				row-reverse:主轴为水平方向，起点在右端
				column:垂直排列,起点在面
				column-reverse:垂直排列,起点下面
			
			flex-wrap:定义子项是否换行
				nowrap不换行
				wrap换行
				wrap-reverse换行(倒叙)
			
			flex-flow:flex-direction flex-wrap(是排列顺序列和换行的复合)
			
			justify-content定义子项目横向对齐方式(横轴)
				flex-start(默认值):左对齐
				flex-end:右对齐
				center:居中
				space-between:两端对齐，项目之间有间隔
				space-around:每个项目两侧的间隔相等。所有项目之间的间隔比项目与边框的间隔大一倍
			
			align-items:定义纵向的对齐方式(纵轴方向)
				flex-start:交叉轴的起点(顶部)对齐
				flex-end:交叉轴的重点(底部)对齐
				center:交叉轴的中点对齐
				baseline:项目的第一行文字的基线对齐
				stretch(默认值):如果项目没有设置宽高或则为auto,沾满这个容器的高度
		 */
		div.box{
     
			width: 1200px;
			height: 500px;
			border: 1px solid black;
			margin: 0 auto;
			/* 设置弹性盒子
				-webkit-谷歌内核
				-moz- 火狐
				-o- 欧鹏
				-ms- IE
				
			 */
			display: flex;
			display: -webkit-flex;
			flex-direction: column;
		}
		div.box>div{
     
			width: 380px;
			height: 480px;
			background: #ffaa00;
			margin: 10px;
		}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="d1">1</div>
			<div class="d1">2</div>
			<div class="d1">3</div>
			<div class="d1">4</div>
			<!-- <div class="d1">5</div>
			<div class="d1">6</div>
			<div class="d1">7</div>
			<div class="d1">8</div>
			<div class="d1">9</div>
			<div class="d1">10</div> -->
		</div>
	</body>
</html>

image-20210722180825071

9.2.2.3.column-reverse：主轴为垂直方向，起点在下沿
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		*{
     
			margin: 0;
			padding: 0;
		}
		/* 
		定义弹性盒子flex
		
		 容器的属性
			flex-direction 定义子项的顺序
				row(默认):起点在左边，水平排列
				row-reverse:主轴为水平方向，起点在右端
				column:垂直排列,起点在面
				column-reverse:垂直排列,起点下面
			
			flex-wrap:定义子项是否换行
				nowrap不换行
				wrap换行
				wrap-reverse换行(倒叙)
			
			flex-flow:flex-direction flex-wrap(是排列顺序列和换行的复合)
			
			justify-content定义子项目横向对齐方式(横轴)
				flex-start(默认值):左对齐
				flex-end:右对齐
				center:居中
				space-between:两端对齐，项目之间有间隔
				space-around:每个项目两侧的间隔相等。所有项目之间的间隔比项目与边框的间隔大一倍
			
			align-items:定义纵向的对齐方式(纵轴方向)
				flex-start:交叉轴的起点(顶部)对齐
				flex-end:交叉轴的重点(底部)对齐
				center:交叉轴的中点对齐
				baseline:项目的第一行文字的基线对齐
				stretch(默认值):如果项目没有设置宽高或则为auto,沾满这个容器的高度
		 */
		div.box{
     
			width: 1200px;
			height: 500px;
			border: 1px solid black;
			margin: 0 auto;
			/* 设置弹性盒子
				-webkit-谷歌内核
				-moz- 火狐
				-o- 欧鹏
				-ms- IE
				
			 */
			display: flex;
			display: -webkit-flex;
			flex-direction: column-reverse;
		}
		div.box>div{
     
			width: 380px;
			height: 480px;
			background: #ffaa00;
			margin: 10px;
		}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="d1">1</div>
			<div class="d1">2</div>
			<div class="d1">3</div>
			<div class="d1">4</div>
			<!-- <div class="d1">5</div>
			<div class="d1">6</div>
			<div class="d1">7</div>
			<div class="d1">8</div>
			<div class="d1">9</div>
			<div class="d1">10</div> -->
		</div>
	</body>
</html>

image-20210722180848878

9.2.2flex-wrap 定义子项是否换行
flex-wrap:wrap换行
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		*{
     
			margin: 0;
			padding: 0;
		}
		/* 
		定义弹性盒子flex
		
		 容器的属性
			flex-direction 定义子项的顺序
				row(默认):起点在左边，水平排列
				row-reverse:主轴为水平方向，起点在右端
				column:垂直排列,起点在面
				column-reverse:垂直排列,起点下面
			
			flex-wrap:定义子项是否换行
				nowrap不换行
				wrap换行
				wrap-reverse换行(倒叙)
			
			flex-flow:flex-direction flex-wrap(是排列顺序列和换行的复合)
			
			justify-content定义子项目横向对齐方式(横轴)
				flex-start(默认值):左对齐
				flex-end:右对齐
				center:居中
				space-between:两端对齐，项目之间有间隔
				space-around:每个项目两侧的间隔相等。所有项目之间的间隔比项目与边框的间隔大一倍
			
			align-items:定义纵向的对齐方式(纵轴方向)
				flex-start:交叉轴的起点(顶部)对齐
				flex-end:交叉轴的重点(底部)对齐
				center:交叉轴的中点对齐
				baseline:项目的第一行文字的基线对齐
				stretch(默认值):如果项目没有设置宽高或则为auto,沾满这个容器的高度
		 */
		div.box{
     
			width: 1200px;
			height: 500px;
			border: 1px solid black;
			margin: 0 auto;
			/* 设置弹性盒子
				-webkit-谷歌内核
				-moz- 火狐
				-o- 欧鹏
				-ms- IE
				
			 */
			display: flex;
			display: -webkit-flex;
			flex-wrap: wrap;
		}
		div.box>div{
     
			width: 280px;
			height: 220px;
			background: #ffaa00;
			margin: 10px;
		}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="d1">1</div>
			<div class="d1">2</div>
			<div class="d1">3</div>
			<div class="d1">4</div>
			<div class="d1">5</div>
			<div class="d1">6</div>
		</div>
	</body>
</html>

image-20210722180904189

flex-wrap:wrap-reverse换行(倒叙)
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		*{
     
			margin: 0;
			padding: 0;
		}
		/* 
		定义弹性盒子flex
		
		 容器的属性
			flex-direction 定义子项的顺序
				row(默认):起点在左边，水平排列
				row-reverse:主轴为水平方向，起点在右端
				column:垂直排列,起点在面
				column-reverse:垂直排列,起点下面
			
			flex-wrap:定义子项是否换行
				nowrap不换行
				wrap换行
				wrap-reverse换行(倒叙)
			
			flex-flow:flex-direction flex-wrap(是排列顺序列和换行的复合)
			
			justify-content定义子项目横向对齐方式(横轴)
				flex-start(默认值):左对齐
				flex-end:右对齐
				center:居中
				space-between:两端对齐，项目之间有间隔
				space-around:每个项目两侧的间隔相等。所有项目之间的间隔比项目与边框的间隔大一倍
			
			align-items:定义纵向的对齐方式(纵轴方向)
				flex-start:交叉轴的起点(顶部)对齐
				flex-end:交叉轴的重点(底部)对齐
				center:交叉轴的中点对齐
				baseline:项目的第一行文字的基线对齐
				stretch(默认值):如果项目没有设置宽高或则为auto,沾满这个容器的高度
		 */
		div.box{
     
			width: 1200px;
			height: 500px;
			border: 1px solid black;
			margin: 0 auto;
			/* 设置弹性盒子
				-webkit-谷歌内核
				-moz- 火狐
				-o- 欧鹏
				-ms- IE
				
			 */
			display: flex;
			display: -webkit-flex;
			flex-wrap: wrap-reverse;
		}
		div.box>div{
     
			width: 280px;
			height: 220px;
			background: #ffaa00;
			margin: 10px;
		}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="d1">1</div>
			<div class="d1">2</div>
			<div class="d1">3</div>
			<div class="d1">4</div>
			<div class="d1">5</div>
			<div class="d1">6</div>
		</div>
	</body>
</html>

image-20210722180919514

9.2.3flex-flow:flex-direction flex-wrap

是排列顺序列和换行的复合

9.2.4justify-content定义子项目横向对齐方式(横轴)
  • 1.flex-start(默认值):左对齐
  • 2.flex-end:右对齐
  • 3.center:居中
  • 4.space-between:两端对齐，项目之间有间隔
  • 5.space-around:每个项目两侧的间隔相等。所有项目之间的间隔比项目与边框的间隔大一倍
9.2.5align-items:定义纵向的对齐方式(纵轴方向)
1.flex-start:Y轴的起点(顶部)对齐
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		*{
     
			margin: 0;
			padding: 0;
		}
		div.box{
     
			width: 1200px;
			height: 500px;
			border: 1px solid black;
			margin: 0 auto;
			display: flex;
			display: -webkit-flex;
			align-items: flex-start;
		}
		div.box>div{
     
			margin: 0px 10px;
		}
		div.box>div:nth-child(1){
     
			width: 280px;
			height: 200px;
			background: #aaff00;
		}
		div.box>div:nth-child(2){
     
			width: 280px;
			height: 100px;
			background: #aaff7f;
		}
		div.box>div:nth-child(3)
最低0.47元/天 解锁文章
最love酸奶
关注
专栏目录
【前端知识之CSS】flex弹性布局和grid网格布局
weixin_44337386的博客
05-12 2263
本系列主要整理前端面试中需要掌握的知识点。本节介绍flex弹性布局和grid网格布局。
display:grid 网络布局
wxiao_xiao_miao的博客
04-01 2089
​ Grid布局与display:flex 弹性布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。Grid 布局只对项目生效，不包含项目的子元素。 ​
Flex弹性盒子布局和Grid网格布局详解
最新发布
qq_41765777的博客
08-16 1476
Flex布局（Flexible Box Layout，也称为弹性盒布局）是CSS3中的一种布局模式，旨在让容器能够自动调整其子元素的大小、顺序和对齐方式，以更好地适应不同设备和屏幕尺寸。它的核心理念是“弹性”，即容器中的元素可以根据可用空间进行伸缩。
结合flex布局与Grid布局时的一次Bug
swallowblank的博客
08-12 227
很明显我这里设置两个子div的宽度比是1：1，但是在上面明显不是1：1，图片所占的布局宽度远大于数字的宽度。 我初次思考，觉得发生原因如下，外部布局为grid，此时整体宽度为1fr，但是其实1fr的可用宽度是不够的因此对数字部分造成了压缩。 ...
display：grid；网格布局
weixin_45096939的博客
07-25 2942
display：grid；网格布局，可自适应布局
网格布局grid
weixin_43465508的博客
04-01 866
css网格是一个用于web的二维（行和列的组合）布局，利用网格，你可以把内容按照行和列的格式进行排版，另外，可以轻松的实现复杂布局。在父元素加上，display:grid 或者display：inline-grid,网格项定义默认为一列，并且网格项的column，float,clear,vertical-align等这些设置全部无效grid：生成块级的网格容器。inline-grid: 生成行内的网格容器。
前端三大布局,float,flex,grid的介绍
efew212efe的博客
04-27 1698
什么是布局 在说三大布局之前我们先聊聊什么是布局：布局就是把页面分成一块一块，按左中右、上中下等排列 现在的布局分类有两种： 固定宽度布局，一般宽度为960/1000/1024px 不固定宽度布局，主要靠文档流的原理来布局 还有一种就是响应式布局，这种布局要考虑到手机端的布局，在pc端固定，在手机端不固定 布局的思路： 由大到小，先定下大局再完善小部分，一般老手使用这种办法 由小到大，先完成小部分，再组合成大布局，新手推荐 前端戒律： 在布局的时候千万不要将界面写死，永远不要把width和he
flex弹性布局和grid网格布局
m0_70990872的博客
08-01 433
flex弹性布局和grid网格布局
Grid布局简单介绍及实现常见的布局
海阔天空
11-29 3629
网格布局（Grid）是最强大的 CSS 布局方案。 ——阮一峰阮大神 最近项目中遇到了一些css问题，通过grid布局就能很好的解决，之前grid布局没有用过也不怎么了解，所以在解决问题的过程中特地去学习了一下，主要看了阮大神的文章。 先说说我项目的布局问题吧，就是类似于下图的这种，每块内容宽度不固定，pc上的时候3等分 ，笔记本上就2等分，每块之间需要有一定的间距。这个时候使用...
grid布局
weixin_40326021的博客
10-22 317
CSS Grid 布局由两个核心组成部分是 wrapper（父元素）和 items（子元素）。 wrapper 是实际的 grid(网格)，items 是 grid(网格) 内的内容。 父元素{           display : grid； } 这还没有做任何事情，因为我们没有定义我们希望的 grid(网格) 是怎样的。它会简单地将6个 div 堆叠在一起。 Columns(列...
用CSS实现高度宽度固定比例，宽度不固定
kyfxbl
11-06 6376
今天学到一个很不错的CSS技巧：Zihua Li
使用display: grid布局控制每行显示多少个容器
freddy的博客
10-13 3110
display: grid;
flex布局，不设置宽度，实现文字超出部分隐藏
我总是词不达意的博客
08-30 3821
flex布局,不设置宽度,实现文字超出部分隐藏
flex（弹性盒子）：1的变化，以及flex对width的影响！
钟阿能
10-24 6930
生命不息，学习不止 在今天这个日子，祝愿所有程序员们的世界，永远没有bug 接下来，打开电脑！ 关于疑问： 弹性盒子flex：1的变化？ 弹性盒子对子元素width的影响？ 调试代码： (纯CSS实现手风琴效果) <div class="box"> <ul> <li> <span>谨防三大减肥</span> </li> <l
grid布局中，怎么单独改变某个单元格的width
m0_68094390的博客
05-18 1442
假设有一个包含多个单元格的grid布局，我们要修改第二个单元格的宽度为200px。可以将grid-template-columns属性的值设置为“auto 200px auto”，其中“auto”代表未指定宽度的单元格会自动填充剩余空间。这样就会仅仅修改第二个单元格的宽度，而其他单元格的宽度会保持为自动填充剩余空间。可以使用grid-template-columns属性来修改特定单元格的宽度。
样式布局flex----一行五个元素，随着屏幕变化宽度发生改变
CC酱写前端的博客
07-29 5534
CSS flex布局
flex布局常用布局方式（一行显示固定个数，自动换行显示）
热门推荐
Serena_tz的博客
11-23 1万+
基于uni-app实现一行显示固定个数的元素，元素可以遍历生成的，并且自动换行显示，效果如下图所示。// 这里一行显示4个，所以是/4，一行显示几个就除以几 // 这里的60rpx = (分布个数4-1)*间隙20rpx, 可以根据实际的分布个数和间隙区调整 min-width: calc((100% - 60rpx) / 4); max-width: calc((100% - 60rpx) / 4); // 每行最右侧的那个不设置右外边距
flex弹性布局
qq_44718039的博客
06-22 817
flex布局
掌握Flex布局：Web前端教程详解
与Grid布局相比，Flex布局更适合用于单维度布局（行或列），而Grid布局更适合复杂的二维布局。 6. Flex布局的浏览器兼容性 Flex布局得到了所有现代浏览器的支持，包括IE10及以上版本的IE浏览器。然而，对于早期的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值