＜学习记录＞Flex实现的几种布局

最新推荐文章于 2024-02-12 22:19:08 发布
最新推荐文章于 2024-02-12 22:19:08 发布
阅读量285 收藏
点赞数
文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/X_YMY/article/details/120901506
版权
本文通过三个实例展示了HTML和CSS在页面布局方面的应用：一是创建骰子布局，利用CSS实现不同形状和排列的骰子；二是实现流式布局，展示了如何用flexbox进行响应式内容排列；三是设计输入框布局，包括添加按钮、搜索框和提交按钮的对齐方式。这些实例有助于理解HTML和CSS在网页布局中的灵活性和实用性。
摘要由CSDN通过智能技术生成

一、骰子布局
效果图
实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
	
		.box{
			position:relative;
			width:1000px;
			height:1000px;
			/*flex*/
			display:flex;
			justify-content:space-around;
			align-items:center;
			}
		section
		{
			box-sizing:border-box;
			border-radius:10px;
			background-color:#ddd;
			width:80px;
			height:80px;
			/*flex*/
			display:flex;
		}
		.stone{
			width:20px;
			height:20px;
			border-radius:50%;
			background-color:#000;		
		}
		
		.box >:first-child
		{
			justify-content:center;
			align-items:center;
		}
		.box >:nth-child(2)
		{
			padding:5px;
			justify-content:space-between;
			
		}
			.box >:nth-child(2) >:nth-child(2)
			{
					align-self:flex-end;
			}
		.box >:nth-child(3)
		{
			padding:5px;
			justify-content:space-around;
		}
			.box >:nth-child(3) >:nth-child(2)
			{
				align-self:center;
			}
			.box >:nth-child(3) >:nth-child(3)
			{
				align-self:flex-end;
			}
		.box >:nth-child(4)
		{
			padding:5px;
			justify-content:space-between;
			flex-direction:column;
		}
			.box >:nth-child(4) div
			{
				display:flex;
				justify-content:space-between;
			}
		.box >:nth-child(5)
		{
			padding:5px;
			justify-content:space-around;
		}
			.box >:nth-child(5) > div
			{
				display:flex;
				flex-direction:column;
				justify-content:space-between;
			}
			.box >:nth-child(5) >:nth-child(2)
			{
				align-self:center;
			}
		.box >:last-child
		{
			padding:5px 6px;
			justify-content:space-between;
		}
			.box >:last-child >div
			{
				display:flex;
				flex-direction:column;
				justify-content:space-around;
			}
			
		</style>
	</head>
	<body>
		<div class="box">
			<section>
				<div class="stone"></div>
			</section>
			<section>
				<div class="stone"></div>
				<div class="stone"></div>
			</section>
			<section>
				<div class="stone"></div>
				<div class="stone"></div>
				<div class="stone"></div>
			</section>
			<section>
				<div>
					<div class="stone"></div>
					<div class="stone"></div>
				</div>
				<div>
					<div class="stone"></div>
					<div class="stone"></div>
				</div>
			</section>
			<section>
				<div>
					<div class="stone"></div>
					<div class="stone"></div>
				</div>
				<div class="stone"></div>
				<div>
					<div class="stone"></div>
					<div class="stone"></div>
				</div>
			</section>
			<section>
				<div>
					<div class="stone"></div>
					<div class="stone"></div>
					<div class="stone"></div>
				</div>
				<div>
					<div class="stone"></div>
					<div class="stone"></div>
					<div class="stone"></div>
				</div>
			</section>
		</div>
	</body>
</html>

二、流式布局
效果图
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		*{
			padding: 0;
			margin: 0;
			box-sizing: border-box;
		}
		.wrap{
			width:300px;
			height:600px;
			border:1px solid #000;
			display: flex;
			flex-wrap: wrap;
			align-content: flex-start;
		}
		.wrap>div{
			width:25%;
			height:100px;
			border:1px solid red;
			background: thistle;
			text-align: center;
			line-height: 100px;
			font-size: 50px;
			
		}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
			<div>7</div>
			<div>8</div>
			<div>9</div>
			<div>10</div>
			<div>11</div>
			<div>12</div>
		</div>
	</body>
</html>

三、输入框布局
效果图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		*{
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		.header{
			height: 60px;
			display: flex;
		}
		.add{
			background-color: #D8BFD8;
			text-align: center;
			line-height: 60px;
			color: #fff;
			width: 60px;
		}
		.sub{
			width: 100px;
		}
		.search{
			flex-grow: 1;
		}
		</style>
	</head>
	<body>
		<div class="header">
			<div class="add">地址</div>
			<input type="text" class="search" />
			<input type="button"  value="提交" class="sub" />
		</div>
		</header>
	</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		*{
			margin:0;
			padding:0;
			box-sizing: border-box;
		}
	
		.wrap{
			display: flex;
		}
		.para{
			flex-grow: 1;
			background: #DDDDDD;
			font-size: 20px;
			font-family: 宋体;
		}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="left" >
				<div class="box"></div>
				<img src="img/皮卡丘.jpg" width="50" height="50"/>
			</div>
			<div class="para">皮卡皮皮卡丘皮卡皮卡皮卡皮皮卡丘皮卡皮卡皮卡皮皮卡丘皮卡皮卡皮卡皮皮卡丘皮卡皮卡皮卡皮皮卡丘皮卡皮卡皮卡皮皮卡丘皮卡皮卡皮卡皮皮卡丘皮卡皮卡皮卡皮皮卡丘皮卡皮卡皮卡皮皮卡丘皮卡皮卡皮卡皮皮卡丘皮卡皮卡皮卡皮皮卡丘皮卡皮卡皮卡皮皮卡丘皮卡皮卡皮卡皮皮卡丘皮卡皮卡皮卡皮皮卡丘皮卡皮卡皮卡皮皮卡丘皮卡皮卡皮卡皮皮卡丘皮卡皮卡皮卡皮皮卡丘皮卡皮卡皮卡皮皮卡丘皮卡皮卡皮卡皮皮卡丘皮卡皮卡皮卡皮皮卡丘皮卡皮卡皮卡皮皮卡丘皮卡皮卡皮卡皮皮卡丘皮卡皮卡皮卡皮皮卡丘皮卡皮卡
			</div>
	</div>
	</body>
</html>
Even今天学习了吗
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用Flex实现常见布局的思路总结
前端达人
08-15 376
来源 |https://www.cnblogs.com/wanglinmantan/p/15092001.htmlflex全称Flexible Box模型，顾名思义就是灵活的盒子，不过一...
flex大法：一网打尽所有常见布局
sinat_33488770的博客
08-01 469
flex全称Flexible Box模型，顾名思义就是灵活的盒子，不过一般都叫弹性盒子，所有PC端及手机端现代浏览器都支持，所以不用担心它的兼容性，有了这玩意，妈妈再也不用担心我们的布局。 先简单介绍一下，要使用flex布局，需要先给一个容器元素设置display:flex让它变成flex容器，然后其所有的直接子元素就变成flex子元素了，在flex里存在两根轴，叫主轴和交叉轴，互相垂直，主轴默认水平，flex子元素默认会沿主轴排列，可以控制flex子元素在主轴上伸缩，主轴方向可以设置，相关的css属性分为
flex实现简单布局
csdnxiaoshi的博客
03-24 156
flex实现简单布局 1.利用flex实现如图布局； 首先是div部分 <div class="head"> <div class="header" style="background-color: red;"></div> <div class="left" style="background-color: bisque;"></div> <div class="content" style="back
flex实现经典的sticky footer布局
yshx1990的专栏
10-12 606
flex实现sticky footer布局
【CSS基础知识】flex布局、table 布局 和 grid布局
weixin_63681863的博客
09-07 783
flex display grid布局介绍和代码实战
Android自定义ViewGroup之实现FlowLayout流式布局
09-02
本文将详细介绍如何实现一个自定义的FlowLayout，这是一种允许子视图按行自动填充的布局，类似于HTML中的`<div>`标签的`display: flex; flex-wrap: wrap;`效果。 ### 一、FlowLayout介绍 FlowLayout是一种布局方式...
前端学习笔记：实现一个盒子水平居中，学习代码
最新发布
06-21
首先，我们讨论CSS中的几种主要的水平居中方法： 1. **使用Flexbox**： Flexbox布局模型是现代Web布局的首选方法，它可以轻松地实现元素的水平和垂直居中。在父容器上设置`display: flex;`，然后添加`justify-...
移动web 第四天flex布局、实战演练小兔仙
12-25
移动Web 中的flex布局是一种常用的布局方式，通过flex布局可以轻松实现各种复杂的布局效果。在本节课程中，我们将学习flex布局的基本概念和应用实践。 一、Flex布局模型 Flex布局模型是指在容器中排列项目的方式。...
flex设计的流程图拖动连线右键功能实现源码
03-22
10. **源码分析**：提供的“流程图拖动连线右键功能实现源码”应当包含了上述所有功能的实现，通过阅读和理解源码，开发者可以学习到具体的技术实现细节和代码组织结构。 通过掌握以上知识点，开发者可以在Flex环境...
yimting.github.io:记录着学习总结，和一些问题
05-14
通过`<style>`标签或外部样式表（`.css`文件）引入CSS，实现颜色、字体、布局等效果。 5. **响应式设计**：随着移动设备的普及，HTML5引入了媒体查询（`@media`）和弹性盒模型（`display: flex`或`grid`），使得...
Flex布局 （上万字）超详细讲解 这篇就够了
热门推荐
制定持续可量化的目标，不断坚持。
02-12 3万+
Flex布局，全称为“Flexible Box Layout”，意为“弹性盒布局”。它是一种现代的CSS布局模式，旨在提供一种更有效的方式来布局、对齐和分配容器中项目之间的空间，即使它们的大小未知或动态变化。灵活性：Flex布局允许项目在容器中灵活地扩展和收缩，以填充可用空间或调整大小以适应内容。对齐方式：Flex布局提供了各种对齐选项，可以轻松地实现水平和垂直对齐。方向控制：可以方便地改变主轴的方向，使项目在水平或垂直方向上排列。空间分配。
“品”字布局
庸人方自扰，自在就好
04-25 661
问题：怎么实现“品”字布局 一、flex布局解决方案 代码： <!doctype html> <html> <head> <meta charset="UTF-8"> <title>flex布局解决方案</title> <style> * { margin: 0; padding: 0; } div { text-align: center;
flex布局
Roninwz的博客
05-04 213
如果用了浮动布局，子元素不需要浮动设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 盒子模型： box-sizing: content-box|border-box|inherit; content-box:普通盒子模型 包括border和padding border-box ： 不包括border和padding 父元素属性： ...
用div来创建田字布局
多看多听多总结
05-08 2718
创建四个div，每个设置float:left,并且将第三个div添加属性clear:left
Flex实现
张晨光老师的播客
03-11 3507
本章简介传统网络应用是基于页面的,服务器端数据传递的模式,而且将网络程序的表示层建立于HTML之上，但是HTML只适合文本。因此，传统的，基于页面的系统已经越来越不适应使用者的全方位提要要求。富因特网应用程序（Rich Internet Application）便应运而生了。Flex是一个针对RIA企业级应用的表示层解决方案，是一种应用程序框架，使用Flex可以针对Web应用程序的表示层开发，并加
flex的一种常用布局实现
沫沫酱
06-16 410
1.有些页面的内容较少，撑不起整个屏幕，结果底部内容显示在了屏幕中间位置。 2.中间部分实现圣杯布局 效果图： 代码： 主要使用了flex:1; <html> <head> <meta charset="utf-8"/> <title>内容过少时，底部内容不在浏览器最下方</title> <style type="text/css"> *{ margin:0p...
CSS3中新的布局方式flex box
田永威的专栏
03-18 368
下面是文章的翻译，概要，来自这篇文章。https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 背景： 为了更高效 赋予container更强的能力，改变其中元素的宽高甚至排序 最重要的是flexbox layout完全不同于常规的布局方式，flex layout 的布局方向是不可知的。 block which is
flex布局及flex实现常见的前端布局
song854601134的博客
11-21 4004
文章目录flex布局一、flex容器属性1、flex-direction2、flex-wrap3、flex-flow4、justify-content5、align-items6、align-content二、项目属性1、order**2、flex-grow****3、flex-shrink**4、flex-basis5、flex筛子布局单个Flex项两个Flex项三个Flex项六个Flex项九个Flex项 flex布局 flex布局两个属性，容器和项目。 一旦我们开启弹性布局后，项目（也就是设为dispa
使用display:flex实现多个子标签等分间距排列
monkey_xiaoda的博客
01-03 7133
今天做项目遇到一个问题：ul标签下有若干个li标签（个数不固定），想要实现平均等分的排列；如效果图： 因为li标签的个数是不固定的，所以不想使用给固定的margin来实现，这样的话太生硬了； 于是想到了使用display:flex;justify-content:space-between;align-items:center;（有浏览器兼容问题） 但出现了如下问题： li标...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>页面布局</title> <style> /* 使用grid布局 / .container { display: grid; grid-template-columns: 200px 1fr; / 左侧宽度为200px，右侧占满剩余空间 / grid-template-rows: 100vh; / 总高度与视窗高度相同 / } / 左侧侧边栏样式 / .sidebar { background-color: #f0f0f0; } / 右侧盒子的容器样式 / .boxes { display: flex; flex-direction: column; justify-content: space-between; height: 100%; } / 右侧5个盒子样式 / .box { flex-grow: 1; / 平分宽度 */ background-color: #ccc; margin-bottom: 10px; } </style> </head> <body> <div class="container"> <div class="sidebar"> <!-- 左侧侧边栏内容 --> </div> <div class="boxes"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> </div> </body> </html> 更改代码使右侧第3，4，5个盒子边框出现一定圆角且与左侧状态栏有一定的距离
05-24
<title>页面布局</title> <style> /* 使用grid布局 */ .container { display: grid; grid-template-columns: 200px 1fr; /* 左侧宽度为200px，右侧占满剩余空间 */ grid-template-rows: 100vh; /* 总高度与...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值