[html] flex弹性盒子、float浮动盒子通用布局（2种布局方式）

最新推荐文章于 2024-08-12 16:19:20 发布
最新推荐文章于 2024-08-12 16:19:20 发布
阅读量1k 收藏 4
点赞数 2
文章标签： css html flex css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34450741/article/details/107576445
版权

彩蛋：后台管理系统一站式平台模板

vue-admin-wonderful，一套为开发者快速开发准备的基于 vue2.x 越看越精彩的后台管理系统一站式平台模板。基于element ui 2.14.0

改变盒子间的间隔，只需改外层 margin: 0 -5px; 和改里层 padding: 5px; 即可。

效果图：
在这里插入图片描述

一、弹性盒子布局

1.1 css

.flex-warp {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	margin: 0 -5px;
}
.flex-warp-item {
	padding: 5px;
	width: 25%;
	height: 100px;
}
.flex-warp-item-box {
	width: 100%;
	height: 100%;
	border: 1px solid red;
}

1.2 html

<div class="public-warp">
	<div>1、弹性盒子布局</div>
	<div class="flex-warp">
		<div class="flex-warp-item">
			<div class="flex-warp-item-box">flex</div>
		</div>
		<div class="flex-warp-item">
			<div class="flex-warp-item-box">flex</div>
		</div>
		<div class="flex-warp-item">
			<div class="flex-warp-item-box">flex</div>
		</div>
		<div class="flex-warp-item">
			<div class="flex-warp-item-box">flex</div>
		</div>
		<div class="flex-warp-item">
			<div class="flex-warp-item-box">flex</div>
		</div>
	</div>
</div>
二、float 布局

2.1 css

.float-warp {
	margin: 0 -5px;
	overflow: hidden;
}
.float-warp-item {
	padding: 5px;
	width: 25%;
	height: 100px;
	float: left;
}
.float-warp-item-box {
	width: 100%;
	height: 100%;
	border: 1px solid red;
}

2.2 html

<div class="public-warp">
	<div>2、float 布局</div>
	<div class="float-warp">
		<div class="float-warp-item">
			<div class="float-warp-item-box">float</div>
		</div>
		<div class="float-warp-item">
			<div class="float-warp-item-box">float</div>
		</div>
		<div class="float-warp-item">
			<div class="float-warp-item-box">float</div>
		</div>
		<div class="float-warp-item">
			<div class="float-warp-item-box">float</div>
		</div>
		<div class="float-warp-item">
			<div class="float-warp-item-box">float</div>
		</div>
	</div>
</div>
三、全部 html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}

			.public-warp {
				border: 2px solid forestgreen;
				margin: 50px;
				overflow: hidden;
				padding: 2.5px 0;
			}

			/* 1、弹性盒子布局 start
			-----------------------*/
			.flex-warp {
				display: flex;
				flex-wrap: wrap;
				align-content: flex-start;
				margin: 0 -5px;
			}

			.flex-warp-item {
				padding: 5px;
				width: 25%;
				height: 100px;
			}

			.flex-warp-item-box {
				width: 100%;
				height: 100%;
				border: 1px solid red;
			}

			/* 1、弹性盒子布局 end
			-----------------------*/

			/* 2、float 布局 start
			-----------------------*/
			.float-warp {
				margin: 0 -5px;
				overflow: hidden;
			}

			.float-warp-item {
				padding: 5px;
				width: 25%;
				height: 100px;
				float: left;
			}

			.float-warp-item-box {
				width: 100%;
				height: 100%;
				border: 1px solid red;
			}

			/* 2、float 布局 end
			-----------------------*/
		</style>
	</head>
	<body>
		<div class="public-warp">
			<div>1、弹性盒子布局</div>
			<div class="flex-warp">
				<div class="flex-warp-item">
					<div class="flex-warp-item-box">flex</div>
				</div>
				<div class="flex-warp-item">
					<div class="flex-warp-item-box">flex</div>
				</div>
				<div class="flex-warp-item">
					<div class="flex-warp-item-box">flex</div>
				</div>
				<div class="flex-warp-item">
					<div class="flex-warp-item-box">flex</div>
				</div>
				<div class="flex-warp-item">
					<div class="flex-warp-item-box">flex</div>
				</div>
			</div>
		</div>

		<div class="public-warp">
			<div>2、float 布局</div>
			<div class="float-warp">
				<div class="float-warp-item">
					<div class="float-warp-item-box">float</div>
				</div>
				<div class="float-warp-item">
					<div class="float-warp-item-box">float</div>
				</div>
				<div class="float-warp-item">
					<div class="float-warp-item-box">float</div>
				</div>
				<div class="float-warp-item">
					<div class="float-warp-item-box">float</div>
				</div>
				<div class="float-warp-item">
					<div class="float-warp-item-box">float</div>
				</div>
			</div>
		</div>
	</body>
</html>
lyt-top
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS中弹性盒布局(flex)
XinKun的博客
11-10 543
一、弹性盒(flex) flex（弹性盒/伸缩盒） 是CSS中又一种布局手段，他主要用来代替浮动来完成页面的布局 flex可以使元素具有弹性，让元素可以根据页面大小改变而改变 弹性容器 要使用弹性盒，必须先将一个元素设置为弹性容器 我们可以通过display来设置弹性容器 display:flex 设置为块级弹性容器 display:inline-flex 设置为
Bootstrap4 Flex（弹性盒子）布局（怎么解决内容浮动）
wmeng13的博客
06-19 2753
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
【掰开揉碎】Flex 布局与 Float
tutututu12345678的博客
01-21 899
先说总结：在现代前端开发中，推荐使用 Flex 布局，特别是对于需要更灵活、更自适应的布局场景。然而，在特定情况下，Float 布局仍然有其用武之地，例如实现特定的文本环绕效果。
hover的使用
m0_52219955的博客
06-02 176
HTML基础 常用标签 <p>，定义一个段落 <h1>-<h6>，定义标题，h1等级最高，h6等级最低 <strong> ，用于强调文本，加粗字体 <em>，用于强调文本，斜体文本 <b>，粗体文本 <i>，斜体文本 <u>，下划线文本 <br>，换行 <hr>，水平分割线 块级元素和行内元素 块级元素 总是在新行上开始； 高度，行高以及外边距和内边距都是可以控制的； 宽度缺省值是
Flex（弹性）布局实例
weixin_48920521的博客
07-27 171
骰子的布局 下面，就来看看Flex如何实现布局。 你可以到codepen查看Demo 如果不加说明，本节的HTML模板一律如下： <div class="box"> <span class="item"></span> </div> 上面代码中，div元素（代表骰子的一个面）是Flex容器，span元素（代表一个点）是Flex项目。如果有多个项目，就要添加多个span元素，以此类推。 单项目 首先只有左上角有一个点。 Flex布局默认就是首行左对齐，所
flex布局
qq_52683824的博客
01-16 998
flex布局 1.在不使用浮动和框架的前提下实现元素的排列。 2.代替浮动使布局更加方便 3.对齐方式包括了水平方向与垂直方向 4.弹性项目可通过CSS重新排序 创建方式 添加属性 dispaly:flex; 模板样式 flex布局存在两根轴：水平方向的称为主轴（main axis) ;垂直方向的称为交叉轴（cross axis). 主轴的开始位置叫做main start，结束位置叫做main end. 交叉轴的开始位置叫 cross start，结束位置叫作cross end. flex布局的属性介绍与
html div布局
05-17
3. **布局灵活性**：通过设置`display`属性，如`block`、`inline-block`或`flex`，`<div>`可以适应各种布局模式，如流式布局、网格布局、弹性布局等。 4. **定位精确**：使用`position`属性（如`static`、`relative`...
CSS.DIV网页样式与布局
11-16
2. 浮动布局：CSS的`float`属性用于使元素浮动，常用于创建多列布局。当一个元素浮动后，它会尽可能地向左或向右移动，直到其边缘碰到包含框或另一个浮动元素的边缘。 3. 定位：CSS的`position`属性（如`static`、`...
css+div布局练习
04-07
1. 浮动布局（Float Layout）：早期的CSS布局方式，通过设置元素的`float`属性（如`float:left`或`float:right`），使其在容器内浮动，从而实现多列布局。但这种方法存在一些局限，如无法自适应屏幕大小和容易引发父...
CSS+DIV布局案例CSS+DIV布局案例CSS+DIV布局案例
01-13
2. **浮动布局**：通过设置`float`属性（如`float:left`或`float:right`），可以使元素在父容器中浮动，常用于创建多列布局。 3. **定位布局**：`position`属性（如`static`、`relative`、`absolute`、`fixed`）...
FLEX网页模板
12-10
流行的网页制作模板，方便实用，让你的网页更加绚丽多彩。
页面布局
07-13
3. Float布局：浮动布局是早期常用的布局技术，通过设置元素的float属性（如left或right），可以让元素在当前行内浮动，使得后续元素可以环绕它。然而，此方法存在一些局限性，例如清除浮动带来的问题。 4. Display...
html学习（布局方式(layout)、浮动(float)、定位(position)、弹性盒(flex)）
qq_52847866的博客
04-26 1416
布局方式(layout) 文档流 文档流（normal flow） 文档流通俗的讲，就是一个web页面中，每一个模块只能从上到下从左往右的方式排列在页面上。 将窗口自下而上分成一行一行，应在每行中按从左至右的依次排放元素，即为文档流 我们创建的的元素默认都在文档流中。 这里与其它如移动端（iOS）开发是不太一样的布局方式。 元素在文档流中有什么特点： - 块元素 <div> - 块元素会在页面中独占一行 - 默认宽度是父元素
弹性盒子flex和浮动float解决大部分布局问题
qq_42306286的博客
09-21 4590
float配合width属性能够对div的排列进行布局， 弹性盒子则能够对div内的元素进行各种布局，根据不同的页面通过弹性盒子和float的灵活搭配几乎能够布局大部分页面。 再搭配属性block inline inline-block inline-flex等就更加灵活。 ...
一文搞懂 CSS 盒子模型：概念、种类、布局方式、边距塌陷全都在这里了
张旭乾 - 全栈工程师/海归
08-24 1657
在用 CSS 布局的时候，经常会有各种怪异的情况出现，有些元素就是不在它应该在的位置上，也显示不成该有的大小，页面乱七八糟。这些其实还是因为 CSS 的布局基础没有掌握牢固且不够熟练。今天就深入了解一下 CSS 最基础也是最重要的部分 - 盒子模型，分别会讲到盒子的概念、布局方式、box-sizing 属性、特殊的盒子模型以及边距塌陷，相信你掌握了它们之后就能解决一大半的布局问题。 目录盒子模型盒子的类型content-boxborder-box特殊的盒子-替换元素盒子的布局方式外部显示类型块级盒子行内盒子
html布局自然流加浮动,CSS中的流式布局，浮动布局，层布局，flex布局
weixin_35032509的博客
06-11 327
CSS中的流式布局，浮动布局，层布局，flex布局[toc]1. 流式布局流式布局: 标准文档流布局对的方式：从上向下，从左到右进行布局男盒子独占一行，女盒子并排显示，女盒如果一行撑满了，自动换行。2. 浮动布局浮动布局: 让块标签进行并排显示2.1浮动的特点浮动会脱离标准流(没有完全脱离文档流)1.如果一个元素浮动了，那么它就脱离了标准文档流，后面的元素就让向上排，如果后面的元素内部有文字，这些...
浮动及其弹性盒子
wqxiaongqi的博客
05-07 2261
一：浮动        问题：浮动是什么？            浮动元素会脱离文档流并且向左或向右浮动，直到碰到父集元素或另外浮动元素；            浮动会影响父级元素，支撑影响父级元素的高度 &lt;div class="container"&gt; &lt;div class="left"&gt;左浮动&lt;/div&gt; &lt;div class="right&quot
关于HTML弹性布局
P7295的博客
05-01 439
Ⅰ.使用简介 对于前端入门的新手来说，逻辑思维可能并没有这么强。 在使用传统的盒模型布局中，当代码比较繁杂的时候， 频繁的去使用浮动并且清除浮动等一系列问题会更让人头皮发麻， 这时候使用flex弹性布局就简易的给了布局排列一个立竿见影的效果。 并且随着浏览器不断兼容以及旧版本的淘汰，flex布局注定会成为更为流行的布局方案。 Ⅱ.概念 !!!注意：在动用了弹性布局后，子元素的float、clear和vertical-align属性将失效。 Ⅲ.属...
css实现水滴效果图
最新发布
yinge0508的博客
08-12 835
【代码】css实现水滴效果图。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值