前端flex布局和grid布局

最新推荐文章于 2024-05-06 21:21:46 发布
最新推荐文章于 2024-05-06 21:21:46 发布
阅读量544 收藏 6
点赞数 4
文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53161190/article/details/119006061
版权
本文详细介绍了前端布局中的flex和grid布局，包括flex-direction、flex-wrap、justify-content、align-items等关键属性的用法，以及grid-template-rows、grid-template-columns和grid-auto-flow等grid布局特性。通过实例解析，帮助开发者掌握这两种强大的布局工具。
摘要由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){
    
			width: 280px;
			height: 150px
最低0.47元/天 解锁文章
最爱喝的是酸奶
关注
  • 4
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
携程网站 移动端 Flex布局
06-08
携程网站 移动端 Flex布局，新人可以利用此资源来学习flex布局的应用 Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。本文给出了 ...
display:grid 网格布局
woyebuzhidao321的博客
04-02 9676
一、第一个示例了解网格布局 <!DOCTYPE html> <html> <head> <style> .item1 { grid-area: myArea; } .grid-container { display: grid; grid-template-areas: 'myArea myArea myArea . . .'; grid-gap: 10px; background-color: #2196F3; padding: 1
display:grid的基本使用、行和列的基本设置、间距、行列宽高
weixin_45803990的博客
08-02 2万+
宫格化布局的基本使用
CSS Flexbox与Grid：构建响应式布局的艺术
最新发布
天涯学馆
05-06 1257
定义网格的列和行轨道（track）大小。简写属性，用于同时设置grid-row-start、grid-column-start、grid-row-end和grid-column-end，或引用在grid-template-areas中定义的区域名称。覆盖容器的 align-items 属性，定义单个项目在交叉轴上的对齐方式。仅在多行Flex布局（flex-wrap: wrap）中生效，定义多行项目在交叉轴上的对齐方式。定义网格布局的区域（area），通过命名项目并用字符串描述网格结构。定义项目的放大比例。
display：grid；网格布局
weixin_45096939的博客
07-25 2863
display：grid；网格布局，可自适应布局
CSS grid网格布局，列数固定，宽度flex弹性
Ttowx的博客
05-22 1042
当各列宽度单位设置都为fr时，则表示父元素宽度的平均划分成n份，一份宽度为1fr。优点：子元素数量不足六列时，宽度依然是父元素宽度的1/6。缺点:当子元素item数量不足六列时，宽度并非1/6。此方法可实现一行固定排列六列，宽度随着屏幕大小弹性。当各列宽度单位中有设置为px时，如。
css 弹性盒子和grid网格布局实现九宫格布局，每个格子的宽高一致（跟随页面宽度平分）。
PrimaryColor
04-07 2860
效果图： 高度设置为0，使用内间距100%，就可以将容器宽高的大小设置为一致。 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</titl
记录flex和grid布局的代码
03-25
在前端开发领域，布局设计是至关重要的，而Flex布局和Grid布局是现代Web设计中两种主要的布局方式。本文将深入探讨这两种布局模式，并通过代码示例帮助理解它们的工作原理和应用场景。 首先，Flex布局（Flexible ...
拥抱未来的CSS布局方式flex与grid布局
08-11
通过实际操作和实践，可以更直观地感受到Flexbox和Grid布局在布局和界面设计中的强大功能和灵活性。学习和熟练运用这两种布局，不仅能够提升网页设计的质量，还能提高开发效率，让开发者更好地应对未来的Web开发挑战...
Grid简单入门布局.pptx
02-25
【CSS Grid布局】是Web开发中的二维布局系统，主要用于网页设计和前端开发，它使得创建复杂的、响应式的、均匀分布的布局变得更加简单。在【Grid简单入门布局.pptx】的技术分享中，主要介绍了Grid布局的基本概念、与...
携程网首页主要利用flex布局实现
05-02
在实践中，携程网首页的Flex布局可能涉及到更复杂的结构和组合，例如使用CSS Grid与Flexbox混合布局，或是通过JavaScript动态调整Flex属性来实现特定的交互效果。学习和掌握Flex布局，不仅可以提升网页设计的质量，...
【前端第六课】Grid布局基础
Ws_zqw的博客
12-27 1212
Grid布局基础
grid 布局一 固定宽度 自适应宽度
qq_29069777的博客
10-19 1854
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta nam...
网格布局grid
weixin_43465508的博客
04-01 821
css网格是一个用于web的二维（行和列的组合）布局，利用网格，你可以把内容按照行和列的格式进行排版，另外，可以轻松的实现复杂布局。在父元素加上，display:grid 或者display：inline-grid,网格项定义默认为一列，并且网格项的column，float,clear,vertical-align等这些设置全部无效grid：生成块级的网格容器。inline-grid: 生成行内的网格容器。
一文搞懂Grid 布局
热门推荐
pz1021的博客
09-29 4万+
Grid 布局是什么？ Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案，是目前唯一一种 CSS 二维布局。利用 Grid 布局，我们可以轻松实现类似下图布局，演示地址 Grid 布局和 flex 布局 讲到布局，我们就会想到 flex 布局，甚至有人认为竟然有 flex 布局了，似乎没有必要去了解 Grid 布局。但 flex 布局和 Grid 布局有实质的区别，那就是 flex 布
Grid网格布局详细讲解
qwguo
06-12 8323
‘Grid是CSS3中网格布局系统，也是CSS3中最强大的布局系统。它是一个二维布局系统，这意味着它可以处理列和行，不像flex弹性布局主要是一维系统，他像表格一样可以让我们控制行或者例对齐，可以控制子元素跨行或者跨列，但是他比表格更加灵活，它的子元素可以单独定位就像CSS定位元素一样，同时还可以重叠单元格。’ ‘您可以使用网格布局，通过将CSS规则应用于父元素（成为网格容器）和该元素的子元素（它们成为网格项）’ css3中的grid布局学习 基本概念 我们这里用我们最熟悉城市街道来理解这些概念。 .
Grid布局简单介绍及实现常见的布局
海阔天空
11-29 3563
网格布局（Grid）是最强大的 CSS 布局方案。 ——阮一峰阮大神 最近项目中遇到了一些css问题，通过grid布局就能很好的解决，之前grid布局没有用过也不怎么了解，所以在解决问题的过程中特地去学习了一下，主要看了阮大神的文章。 先说说我项目的布局问题吧，就是类似于下图的这种，每块内容宽度不固定，pc上的时候3等分 ，笔记本上就2等分，每块之间需要有一定的间距。这个时候使用...
用CSS实现高度宽度固定比例，宽度不固定
kyfxbl
11-06 6343
今天学到一个很不错的CSS技巧：Zihua Li
grid布局
weixin_40326021的博客
10-22 262
CSS Grid 布局由两个核心组成部分是 wrapper（父元素）和 items（子元素）。 wrapper 是实际的 grid(网格)，items 是 grid(网格) 内的内容。 父元素{           display : grid； } 这还没有做任何事情，因为我们没有定义我们希望的 grid(网格) 是怎样的。它会简单地将6个 div 堆叠在一起。 Columns(列...
Grid布局详解：容器属性、网格结构和应用实践
Grid布局不同于flex布局，flex布局是流式布局，会按照轴进行排列，如果侧轴方向的大小不统一，则侧轴方向就会有空白处。 二、Grid网格布局与flex的区别： Grid布局是按照网格结构排列，而flex布局是流式布局。Grid...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值