Web——day07——弹性布局

最新推荐文章于 2023-05-08 22:11:47 发布
最新推荐文章于 2023-05-08 22:11:47 发布
阅读量352 收藏 2
点赞数
分类专栏： Web学习 文章标签： html web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45792414/article/details/119281001
版权

弹性布局

弹性布局（1）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.container{
				width: 600px;
				display: flex;/*父元素|容器设置flex*/
				/*flex-direction: column;呈现列，row是行,默认为行*/
				/*flex-direction: row-reverse;从右到左*/
				/*flex-direction: column-reverse;从下到上*/
				flex-direction: row;
				/*justify-content: flex-end;x轴上水平对齐:居右*/
				/*justify-content: center;居中*/
				justify-content: space-around;/*平均分配*/
				/*justify-content: space-between;两边贴边剩下空间平均分配*/
				/*justify-content: flex-start;居左*/
				flex-wrap: wrap;/*主轴方向上：自动换行*/
				/*不换行则进行压缩盒子，并不按照尺寸来*/
				/*按主轴线进行垂直，测轴/交叉轴*/
				/*垂直对齐justify-content*/
				/*换行flex-wrap:no-wrap.不换行*/
			}
			.container>div{
				width: 200px;
				height: 100px;
				margin: 30px;
			}
			.container>div:nth-child(1){
				background-color: red;
			}
			.container>div:nth-child(2){
				background-color: green;
			}
			.container>div:nth-child(3){
				background-color: #8A2BE2;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div>1hello</div>
			<div>2world</div>
			<div>3!</div>
		</div>
	</body>
</html>

代码运行结果：
在这里插入图片描述

弹性布局（2）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>平行显示</title>
		<style>
			.box{
				width: 250px;
				height: 300px;
				border: 1px solid;
				display: flex;
				flex-wrap: wrap;
			}
			.box>div{
				width: 100px;
				background-color: purple;
				margin: 10px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div></div>
			<div></div>
			<div></div>
		</div>
	</body>
</html>

代码的运行结果：
在这里插入图片描述

弹性布局（3）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直显示</title>
	<style>
				.box{
					width: 250px;
					height: 300px;
					border: 1px solid;
					display: flex;
					flex-direction: column;
					/*flex-wrap: wrap;*/
				}
				.box>div{
					width: 100px;
					height: 100px;
					background-color: purple;
					margin: 10px;
				}
			</style>
		</head>
		<body>
			<div class="box">
				<div>1</div>
				<div>2</div>
				<div>3</div>
			</div>
		</body>
	</html>

代码的运行结果：
在这里插入图片描述

Test——垂直

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box{
				width: 350px;
				height: 300px;
				border: 1px solid;
				display: flex;
				flex-direction: column;
				flex-wrap: wrap;
				justify-content: center;
				align-content: space-around;
			}
			.box>div{
				width: 100px;
				height: 100px;
				background-color: purple;
				margin: 10px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div>1</div>
			<div>2</div>
			<div>3</div>
		</div>
	</body>
</html>

代码的运行结果：
在这里插入图片描述

弹性子项属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/*先写方向，在写换行*/
			/*高度默认拉伸*/
			.box{
				width: 800px;
				height: 300px;
				border: 1px solid;
				display: flex;
			}
			.box>div{
				margin: 10px;
				background-color: #DDA0DD;
				flex: 1;
				height: 100px;
			}
			.box>div:nth-child(3){
				flex: 3;
				align-self: flex-end;/*居中,不会串行*/
				order: -1;/*值越大，排的越靠后,值越小，排的越靠前*/
			}
			/*在弹性盒模型里面，无论使用什么标签，最后样子都是一样的*/
		</style>
	</head>
	<body>
		<div class="box">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
		</div>
	</body>
</html>

代码的运行结果：
在这里插入图片描述

多行水平测轴

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>平行显示</title>
		<style>
			.box{
				width: 350px;
				height: 300px;
				border: 1px solid;
				display: flex;
				justify-content: center;
				/*align-items: stretch;*/
				flex-wrap: wrap;
				justify-content: flex-start;
				/*align-items: center;中间空间步骤中间空间不受限制*/
				align-content: space-between;
			}
			.box>div{
				width: 100px;
				height: 100px;
				background-color: purple;
				margin: 10px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div>1</div>
			<div>2</div>
			<div>3</div>
		</div>
	</body>
</html>

代码的运行结果：
在这里插入图片描述

水平测轴对齐方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>平行显示</title>
		<style>
			.box{
				width: 350px;
				height: 300px;
				border: 1px solid;
				display: flex;
				justify-content: center;/*主轴对齐*/
				/*align-items: center;测轴对齐，没有左右对齐*/
				align-items: stretch;
			}
			.box>div{
				width: 100px;
				/*height: 100px;*/
				background-color: purple;
				margin: 10px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div></div>
			<div></div>
			<div></div>
		</div>
	</body>
</html>

代码的运行结果：
在这里插入图片描述

对齐

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box{
				width: 350px;
				height: 300px;
				border: 1px solid;
				display: flex;
				flex-direction: column;
				flex-wrap: wrap;
				justify-content: space-around;
				align-content: space-around;
			}
			.box>div{
				width: 100px;
				height: 100px;
				background-color: purple;
				margin: 10px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div>1</div>
			<div>2</div>
			<div>3</div>
		</div>
	</body>
</html>

代码的运行结果：
在这里插入图片描述

Test——京东页面布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
			}
			html,body{
				width: 100%;
				height: 100%;
			}
			.header{
				width: 100%;
				height: 10%;
				background-color: black;
			}
			.pic{
				width: 100%;
				height: 25%;
				background-color: yellow;
			}
			.piic{
				width: 100%;
				height: 20%;
				border: 5px solid white;
				background-color: plum;
			}
			.choose{
				width: 100%;
				height: 20%;
			}
			.cut{
				width: 100%;
				height: 50%;
			}
			.cut div{
				width: 19.55%;
				border: 2px solid white;
				height: 100%;
				float: left;
			}
			.cut div:nth-child(1){
				background-color: #ADFF2F;
			}
			.cut div:nth-child(2){
				background-color: aqua;
			}
			.cut div:nth-child(3){
				background-color: blueviolet;
			}
			.cut div:nth-child(4){
				background-color: blue;
			}
			.cut div:nth-child(5){
				background-color: crimson;
			}
			.cut1{
				width: 100%;
				height: 50%;
			}
			.cut1 div{
				width: 19.55%;
				border: 2px solid white;
				height: 100%;
				float: left;
			}
			.cut1 div:nth-child(1){
				background-color: aqua;
			}
			.cut1 div:nth-child(2){
				background-color: #ADFF2F;
			}
			.cut1 div:nth-child(3){
				background-color: blue;
			}
			.cut1 div:nth-child(4){
				background-color: #DDA0DD;
			}
			.cut1 div:nth-child(5){
				background-color: blueviolet;
			}
			.footer{
				width: 100%;
				height: 30%;
			}
			.p{
				width: 48.9%;
				height: 100%;
				border: 5px solid white;
				background-color: #DDA0DD;
				float: left;
			}
			.pp{
				width: 28.9%;
				height: 100%;
				border: 5px solid white;
				background-color: #FFFF00;
				float: left;
			}
			.ppp{
				width: 18.9%;
				height: 100%;
				border: 5px solid white;
				background-color: red;
				float: left;
			}
		</style>
	</head>
	<body>
		<div class="header"></div>
		<div class="pic"></div>
		<div class="piic"></div>
		<div class="choose">
			<div class="cut">
				<div>1</div>
				<div>2</div>
				<div>3</div>
				<div>4</div>
				<div>5</div>
			</div>
			<div class="cut1">
				<div>1</div>
				<div>2</div>
				<div>3</div>
				<div>4</div>
				<div>5</div>
			</div>
		</div>
		<div class="footer">
			<div class="p"></div>
			<div class="pp"></div>
			<div class="ppp"></div>
		</div>
	</body>
</html>

代码的运行结果：
请添加图片描述
——The End

子曰礼
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
弹性布局flex
wu1862953的博客
04-27 987
现代web开发，需要适应不同屏幕尺寸、设备的大小，灵活显示页面内容；这就要求，网页可以随着页面尺寸的改变而动态调整布局，float浮动属性可以根据显示设备大小，自动换行显示，但是，浮动可提供的可控制的属性太少了，所以难于随心所欲的控制布局。比如：浮动float定位的问题：想把多个块元素水平放在一行内，要计算的元素太多，一个元素的总宽度=,因此一行内的多个元素都按这个计算总宽度，实在太繁琐。然而，弹性布局flex,就可以解决这个问题；；弹性布局可。
【web】弹性布局
weixin_51893107的博客
09-13 162
【web】弹性布局
WEB前端网页设计-Bootstrap4 Flex（弹性）布局
君逍遥o
04-12 719
Bootstrap4 通过 flex 类来控制页面的布局。
web---弹性布局（思维导图）
weixin_57097732的博客
07-30 266
常见布局—弹性布局
一只前端小菜鸟
03-27 1万+
在常见的布局中，通常有一部分是固定高度，而其他部分是剩余大小分配的，这种情况我们可以使用弹性布局。 说到弹性布局，就得介绍一下css属性中的弹性盒——display:flex 它分为主轴和交叉轴两个方向，没有固定的方向，默认主轴是X轴，交叉轴是Y轴，也可以通过属性 flex-direction: column来设置主轴为Y轴 主轴是X轴，意味着它会把子元素横向排列，所有子元素都到一行，Y轴也...
一起学java——Day01.txt
04-03
从0开始一起学java，互帮互助 本文主要讲述变量，数据类型，Scanner类的应用以及printf()的相关知识
微信小程序——day02.zip
01-11
在"微信小程序——day02"的学习主题中，我们将深入探讨微信小程序开发的基础和进阶知识。 1. **环境配置**：首先，你需要安装微信开发者工具，这是创建和调试小程序的必备平台。下载并安装后，可以通过工具进行项目...
Oracle学习笔记——day01
09-02
Oracle数据库是世界上最流行的数据库管理系统之一，广泛用于企业级的数据存储和管理。在Oracle学习的第一天，我们主要关注了SQL语句，这是与Oracle交互的基础。SQL主要包括三种类型的语言：DML（数据操作语言）、DDL...
Oracle学习笔记——day02
09-02
在Oracle数据库的学习过程中，Day02涵盖了基础的SQL语句，主要包括数据表的创建、数据插入、查询以及多表之间的关联操作。以下是对这些知识点的详细解析： 1. 数据表创建： 在Oracle中，创建数据表是通过`CREATE ...
微信小程序——day01.zip
01-09
微信小程序——day01
弹性布局 Flexible Box
Web_Vincent的博客
04-12 428
       今天在菜鸟教程（http://www.runoob.com）上看的一篇教程，晚上我也亲自动手实践了一下，感觉非常好，内容很详细，尤其是图形展示非常贴切，一目了然，浅显易懂。特此转载。弹性布局原文京东APP首页示例简单框架：下端导航栏设计心得：1.核心代码：HTML部分&lt;footer&gt; &lt;ul&gt; &lt;li&gt;&...
html/css弹性布局的几大常用属性详解
ting2909的博客
09-10 3357
弹性布局的名称概念： 1、容器：需要添加弹性布局的父元素；项目：弹性布局容器中的每一个子元素，称为项目。 2、主轴：在弹性布局中，我们会通过属性规定水平/垂直方向（flex-direction）为主轴；与主轴垂直的另一方向，称为交叉轴。 弹性布局的重要的几大基础属性： 1、flex-direction属性决定主轴的方向（即项目的排列方向）。 row（默认值）： 主轴为水平方向，起点在左端； row...
前端基础之弹性布局
weixin_42068652的博客
08-02 931
弹性布局 弹性容器 /*设置为弹性容器*/ display:flex; 弹性子元素 /*child元素为弹性子元素，直接子元素的子元素就不再是弹性子元素*/ .child{ width:200px; height:300px; /*margin:0pxauto;可以使主轴元素平均分布*/ 设置了display：flex的弹性容器的直接子元素即为弹性子...
Web实现：flex弹性布局两栏自适应布局
jasmyn518的博客
03-04 995
HTML部分： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" />
web前端开发—Flex布局
m0_59451453的博客
05-08 1299
Flex布局目标： 能够使用Flex布局模型灵活、快速的开发网页1思考（1）多个盒子横向排列使用什么属性？浮动（2）设置盒子间的间距使用什么属性？margin（3）需要注意什么问题？浮动的盒子脱标（4）体验flex布局，使用flex布局更简单，不会脱标。
Web实现：flex弹性布局简单示例
jasmyn518的博客
02-20 237
HTML部分： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" />
保安日记：前端学习第十二篇之移动端布局-流式布局、flex布局
Zhuo_De的博客
10-08 401
移动端常见布局方案： 单独制作移动端页面（主流） 1.流式布局（百分比布局） 2.flex弹性布局（重点） 3.less+rem+媒体查询布局 4.混合布局 响应式页面兼容PC移动端（其次） 1.媒体查询 2.boorstrap 单独制作移动端页面（主流）： 1、流式布局（百分比布局）： 流式布局也称为非固定像素布局，通过将盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。 防止无限拉伸 内容显示不佳 设定一个最大最小宽度 max-width 最大宽度 min-wid
打造无懈可击的web设计——流动布局和弹性布局
热门推荐
清图出版
05-11 3万+
在现实世界中，防弹衣并不能100%保证您不受伤害，但人们总是在不断地争取提升其防弹性能。毕竟，穿了防弹衣总是比不穿好。         这样的规则同样适用于Web设计。通过增加网页的灵活性,以及采用必要的步骤来保证它在尽可能多的场景中都具备可读性，我们就给自己的作品赋予了一些与众不同的特色。这是一个循序渐进的过程，并且当采用HTML和CSS后，将能够更加容易构建出赏心悦目并且具有良好适应能力的设
web前端程序员必看之浮动布局与弹性布局的区别
黑马程序员官方博客
03-07 2494
Web页面布局技术主要css2.0中主要出现了浮动布局与定位，以及css3中新的布局方式弹性布局。 对于web页面布局史中，浮动与定位统治了所有页面的布局。定位有不可替代的优点，主要的优点是可以实现多层级结构，且子元素的位置不局限于父元素的范围内。 浮动布局主要用于解决多个块元素共存于一行的问题。虽然浮动可以解决多个块元素共存一行的问题，但是也会有非常不好的影响。 影响一，浮动元素会脱离...
jQuery插件之——简单日历
最新发布
05-23
} else if (day > daysInMonth) { html += '<td></td>'; } else { html += '<td>' + day + '</td>'; day++; } } html += '</tr>'; if (day > daysInMonth) { break; } } html += '</table>'; var ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值