Web前端—Flex布局：标准流、浮动、Flex布局、综合案例（短视频首页解决方案）

news2024/10/3 16:20:17

版本说明

当前版本号[20231024]。

20231024初版

目录

文章目录

  • 版本说明
  • 目录
  • Flex布局
    • 01-标准流
    • 02-浮动
      • 基本使用
      • 产品区域布局
        • HTML标签
        • CSS样式
      • 清除浮动
        • 场景搭建
        • 额外标签法
        • 单伪元素法
        • 双伪元素法
        • overfow法
    • 03-Flex布局
      • Flex组成
      • 主轴对齐方式
      • 侧轴对齐方式
      • 修改主轴方向
      • 弹性伸缩比
      • 弹性盒子换行
      • 行内对齐方式
    • 04-综合案例 – 某音解决方案

Flex布局

01-标准流

标准流也叫文档流，指的是标签在页面中默认的排布规则，例如：块元素独占一行，行内元素可以一行显示多个。

1680334840709

02-浮动

基本使用

作用：让块元素水平排列。

属性名：float

属性值

  • left：左对齐
  • right：右对齐
float: left;

特点：

  • 浮动后的盒子顶对齐
  • 浮动后的盒子具备行内块特点
  • 浮动后的盒子脱标，不占用标准流的位置

首先我们先设计两个盒子，代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		
		.a{
			width: 200px;
			height: 200px;
			background-color: aqua;
		}
		
		.b{
			width: 350px;
			height: 350px;
			background-color: greenyellow;
		}
		
	</style>
	<body>
		<div class="a">第一个</div>
		<div class="b">第二个</div>
	</body>
</html>

得出下面这两个模型：

image-20231019152117594

那么首先我们先给第一个模型加上浮动：

.a{
			width: 200px;
			height: 200px;
			background-color: aqua;
			float: left;
		}

可以看到，第一个就像浮起来的方块，占据在了第二个盒子模型的上方：

image-20231019152229602

而一旦给第二个模型加上浮动的话：

.b{
			width: 350px;
			height: 350px;
			background-color: greenyellow;
			float: left;
		}

就可以看到，第一个第二个模型并在了一起，且第一个模型在第二个的左边：

image-20231019152359130

产品区域布局

1680335016853

仿照某商城的网页进行设计：

左边一个大的div，右边一个div中要包含四个小模型

image-20231021170532944

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>产品区域布局</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			
			li{
				list-style: none;
			}
			
			.product{
				margin: 50px auto;
				width: 1226px;
				height: 628px;
				background-color:pink;
			}
			
			.left{
				width: 234px;
				height: 628px;
				background-color: green;
			}
			
			.right{
				width: 992px;
				height: 628px;
				background-color: aqua;
			}
			
		</style>
	</head>
	<body>
		<div class="product">
			<div class="left"></div>
			<div class="right"></div>
		</div>
	</body>
</html>

image-20231021170336813

​ 由于粉色的是父容器div,第一个div（绿色）把父容器高度占满了，下面的div（蓝色）要独占一行容纳不下就跑到外父容器外面了。

.left{
				width: 234px;
				height: 628px;
				background-color: green;
				float: left;
			}
			
			.right{
				width: 992px;
				height: 628px;
				background-color: aqua;
				float: right;
			}

image-20231021170716365

那么开始设置右边的八个li了

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>产品区域布局</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			
			li{
				list-style: none;
			}
			
			.product{
				margin: 50px auto;
				width: 1226px;
				height: 628px;
				background-color:pink;
			}
			
			.left{
				width: 234px;
				height: 628px;
				background-color: green;
				float: left;
			}
			
			.right{
				width: 992px;
				height: 628px;
				background-color: aqua;
				float: right;
			}
			
			.right li{
				width: 234px;
				height: 300px;
				background-color: orange;
			}
			
		</style>
	</head>
	<body>
		<div class="product">
			<div class="left"></div>
			<div class="right">
			 <ul>
				 <li></li>
				 <li></li>
				 <li></li>
				 <li></li>
				 <li></li>
				 <li></li>
				 <li></li>
				 <li></li>
			 </ul>
			</div>
		</div>
	</body>
</html>

由于橙色中包含着八个li，li是块级的，独占一行，我们如果不加任何边距就一行显示了，想像上面商城那样呈现八个内容出来就要加浮动

image-20231021171124521

加完浮动，发现li标签没有完全覆盖，是因为每个li的右边和顶部都有边距

image-20231021171312755

在商城中，这个边距为14px，我们要把其完善到我们的代码里面

image-20231021171430954

加入边框后我们发现，在原本的商城中最后边的一列是不需要加右边距的，加完之后可能会在以后运行里li标签跑到下面去

image-20231021171859314

修改了最后边的一列取消掉右边距，同时修改了些尺寸，使得中间粉色出了一点，后续也会进行处理：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>产品区域布局</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			
			li{
				list-style: none;
			}
			
			.product{
				margin: 50px auto;
				width: 1226px;
				height: 628px;
				background-color:pink;
			}
			
			.left{
				width: 234px;
				height: 628px;
				background-color: green;
				float: left;
			}
			
			.right{
				width: 978px;
				height: 628px;
				background-color: aqua;
				float: right;
			}
			
			.right li{
				width: 234px;
				height: 300px;
				margin-right: 14px;
				margin-bottom: 14px;
				background-color: orange;
				float: left;
			}
			
			.right li:nth-child(4n){
				margin-right: 0;
			}
			
		</style>
	</head>
	<body>
		<div class="product">
			<div class="left"></div>
			<div class="right">
			 <ul>
				 <li></li>
				 <li></li>
				 <li></li>
				 <li></li>
				 <li></li>
				 <li></li>
				 <li></li>
				 <li></li>
			 </ul>
			</div>
		</div>
	</body>
</html>

输出结果如下：

image-20231021172612832

HTML标签
<!-- 版心：左右，右面：8个产品 → 8个 li -->
<div class="product">
  <div class="left"></div>
  <div class="right">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</div>
CSS样式
<style>
  * {
    margin: 0;
    padding: 0;
  }

  li {
    list-style: none;
  }

  .product {
    margin: 50px auto;
    width: 1226px;
    height: 628px;
    background-color: pink;
  }

  .left {
    float: left;
    width: 234px;
    height: 628px;
    background-color: skyblue;
  }

  .right {
    float: right;
    width: 978px;
    height: 628px;
    background-color: brown;
  }

  .right li {
    float: left;
    margin-right: 14px;
    margin-bottom: 14px;
    width: 234px;
    height: 300px;
    background-color: orange;
  }

  /* 第四个li和第八个li 去掉右侧的margin */
  .right li:nth-child(4n) {
    margin-right: 0;
  }

  /* 细节：如果父级宽度不够，浮动的盒子会掉下来 */
</style>

清除浮动

场景：浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度（可能导致页面布局错乱）

解决方法：清除浮动（清除浮动带来的影响）

场景搭建

1680335081694

<style>
  .top {
    margin: 10px auto;
    width: 1200px;
    /* height: 300px; */
    background-color: pink;
  }

  .left {
    float: left;
    width: 200px;
    height: 300px;
    background-color: skyblue;
  }

  .right {
    float: right;
    width: 950px;
    height: 300px;
    background-color: orange;
  }

  .bottom {
    height: 100px;
    background-color: brown;
  }

</style>

<div class="top">
  <div class="left"></div>
  <div class="right"></div>
</div>
<div class="bottom"></div>

通过这段代码，可以知道目前已经发生了浮动，使得页面变得混乱：

image-20231021191532950

额外标签法

在父元素内容的最后添加一个块级元素，设置 CSS 属性 clear: both

缺点是加多了一个标签，在书写的时候会感觉到标签太多，会有些混乱。

<style>
.clearfix {
  clear: both;
}
</style>

<div class="father">
  <div class="left"></div>
  <div class="right"></div>
  <div class="clearfix"></div>
</div>

直到能得到我们想要的答案：

image-20231021191923528

单伪元素法
  1. 准备 after 伪元素
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
  1. 父级使用 clearfix 类
<div class="father clearfix"></div>
双伪元素法
  1. 准备 after 和 before 伪元素
  2. 在其中，before的功能是解决外边距塌陷的问题，而after的功能便是清除浮动。
/* before 解决外边距塌陷问题 */
/* 双伪元素法 */
.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}

/* after 清除浮动 */
.clearfix::after {
  clear: both;
}
  1. 再让父级使用 clearfix 类，使得双伪元素法生效，从而清除浮动。
<div class="father clearfix"></div>
overfow法
.top {
    margin: 10px auto;
    width: 1200px;
    /* height: 300px; */
    background-color: pink;
	overflow: hidden;
  }

03-Flex布局

Flex 布局也叫弹性布局，是浏览器提倡的布局模型，非常适合结构化布局，提供了强大的空间分布和对齐能力。

Flex 模型不会产生浮动布局中脱标现象，布局网页更简单、更灵活。

1680335815005

Flex组成

设置方式：给父元素设置 display: flex，子元素可以自动挤压或拉伸

组成部分：

  • 弹性容器
  • 弹性盒子
  • 主轴：默认在水平方向
  • 侧轴 / 交叉轴：默认在垂直方向

1680335870554

主轴对齐方式

属性名：justify-content

1680335902526

代码：

<style>
  .top {
    display: flex;
	justify-content: center;
	border: 1px solid green;
  }

  .left {
    width: 200px;
    height: 300px;
    background-color: skyblue;
  }

  .right {
    width: 950px;
    height: 300px;
    background-color: orange;
  }

  .bottom {
    height: 100px;
    background-color: brown;
  }

</style>

<div class="top">
  <div class="left"></div>
  <div class="right"></div>
</div>
<div class="bottom"></div>

justify-content: center;效果：

image-20231021195054506

justify-content: space-between;的形成原因是：父级会把剩余的尺寸分配成间距

justify-content: space-between;效果：

image-20231021200834295

justify-content: space-around;效果：其三个空白的间隔，中间距离过大，两边距离一样

image-20231021201250051

justify-content: space-evenly;效果：其三个空白的间隔，距离都是一样的

image-20231021201448632

侧轴对齐方式

  • align-items：当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置）
  • align-self：单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置）

1680335957166

align-items: stretch;效果：

image-20231021202342014

align-items: center;效果：

image-20231021202453996

修改主轴方向

主轴默认在水平方向，侧轴默认在垂直方向

属性名：flex-direction

1680335988425

flex-direction: column;效果：

image-20231022182716315

代码注释：

image-20231022183331079

image-20231022183405558

弹性伸缩比

作用：控制弹性盒子的主轴方向的尺寸。

属性名：flex

属性值：整数数字，表示占用父级剩余尺寸的份数。

在默认情况下，主轴方向尺寸是靠内容撑开；而侧轴默认拉伸

弹性盒子换行

弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子都在一行显示。

属性名：flex-wrap

属性值

  • wrap：换行
  • nowrap：不换行（默认）

flex-wrap: wrap;效果：

image-20231022184342827

行内对齐方式

属性名：align-content

1680336183457

注意：该属性对单行弹性盒子模型无效。

04-综合案例 – 某音解决方案

image-20231023231506960

先制作一个简单的框，预留 **ul 对应的盒子模型的位置 **（即四个图形所在的盒子模型里面的位置） ：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			
			li{
				list-style: none;
			}
			
			.box{
				margin: 50px auto;
				width: 1200px;
				height: 418px;
				border: 1px solid #ddd;
				border-radius: 10px;
			}
			
			/* ul对应的盒子模型,即四个图形所在的盒子模型里面 */
			.box ul{
				padding: 90px 40px 90px 60px;
				height: 418px;
			}
			
		</style>
	</head>
	<body>
		<div class="box">
			 <ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			 </ul>
		 </div>
	</body>
</html>

然后可以看到我们已经建好了4个 li 模型，并且四周的 padding 的尺寸也是正确的：

image-20231023223044000

image-20231023223114439

然后，让弹性盒子换行：

flex-wrap: wrap;

使主轴对齐，在一行之中，让 li 之间有距离：

justify-content: space-between;

输出如下：

image-20231023223804857

可见，底部存在一行的距离，中间的距离也太低。于是我们进行行内对齐，实现两行之间有距离：

align-content: space-between;

输出如下：

image-20231023224137621

给每一个li标签里面给补充好信息，并且分好图片和文字对应的类，相对应进行调整：

<ul>
				<li>
					<div class="pic">
					 <img src="../img/1.svg" alt="">
					</div>
					<div class="text">
						<h4>一键发布多端</h4>
						<p>发布视频到某音短视频、某瓜视频及某日头条</p>
					</div>
				</li>
				<li>
					<div class="pic">
					 <img src="../img/2.svg" alt="">
					</div>
					<div class="text">
						<h4>管理视频内容</h4>
						<p>支持修改已发布稿件状态和实时查询视频审核状态</p>
					</div>
				</li>
				<li>
					<div class="pic">
					 <img src="../img/3.svg" alt="">
					</div>
					<div class="text">
						<h4>发布携带组件</h4>
						<p>支持分享内容携带小程序、地理位置信息等组件，扩展内容及突出地域性</p>
					</div>
				</li>
				<li>
					<div class="pic">
					 <img src="../img/4.svg" alt="">
					</div>
					<div class="text">
						<h4>数据评估分析</h4>
						<p>获取视频在对应产品内的数据表现、获取某音热点，及时进行表现评估</p>
					</div>
				</li>
			 </ul>

输出如下：

image-20231023231529321

最后，只需要把 li 中的粉色背景色去掉即可完成本次案例。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1126406.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

从昏暗到明亮—改善照明环境，提升编程效率

从昏暗到明亮—改善照明环境，提升编程效率

作为一名程序员博主&#xff0c;长时间写代码、写博客&#xff0c;对着电脑屏幕的生活方式已经渐渐成为了我的日常。 然而&#xff0c;这种生活方式却给我的眼睛带来了相当大的压力。每当一天的工作结束&#xff0c;我的眼睛总是感到干涩、疲劳&#xff0c;让我感到不舒适。&am…
阅读更多...
S5PV210裸机(六):SD卡

S5PV210裸机(六):SD卡

本文主要探讨s5pv210的SD的相关知识。 存储 软盘、硬盘、光盘、CD、磁带:磁存储,读写慢、可靠性低 NandFlash、NorFlash:电存储,读写接口时序复杂,接口众多 SD卡、MMC卡、MicroSD、TF卡:统一外部封装和接口,SD兼容MMC标准 iNand、MoviNand、e…
阅读更多...
正点原子嵌入式linux驱动开发——Linux MISC驱动

正点原子嵌入式linux驱动开发——Linux MISC驱动

misc的意思是混合、杂项的&#xff0c;因此MISC驱动也叫做杂项驱动&#xff0c;也就是当板子上的某些外设无法进行分类的时候就可以使用MISC驱动。MISC驱动其实就是最简单的字符设备驱动&#xff0c;通常嵌套在platform总线驱动中&#xff0c;实现复杂的驱动&#xff0c;本章就…
阅读更多...
Web APIS——第一天（下）

Web APIS——第一天（下）

一、随机轮播图案例 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta http-equiv"X-UA-Compatible" content"IEedge" /><meta name"viewport" content"widthde…
阅读更多...
JAVA多线程基础篇--守护线程(Daemon Thread)

JAVA多线程基础篇--守护线程(Daemon Thread)

1.概述 JAVA中的线程主要分为两类&#xff1a;用户线程&#xff08;User Thread&#xff09;和守护线程(Daemon Thread)。JAVA语言中无论是线程还是线程池&#xff0c;默认都是用户线程&#xff0c;因此用户线程也被称为普通线程。守护线程也被称之为后台线程、服务线程或精灵…
阅读更多...
LeetCode977——有序数组的平方

LeetCode977——有序数组的平方

LeetCode977——有序数组的平方 给你一个按 非递减顺序 排序的整数数组 nums&#xff0c;返回 每个数字的平方 组成的新数组&#xff0c;要求新数组也按 非递减顺序 排序。 输入&#xff1a;nums [-4,-1,0,3,10] 输出&#xff1a;[0,1,9,16,100] 解释&#xff1a;平方后&…
阅读更多...
【ECS游戏架构】逻辑帧驱动带来的性能和即时性问题分析

【ECS游戏架构】逻辑帧驱动带来的性能和即时性问题分析

1024水一篇~ 个人拙见&#xff0c;如有错误希望大佬拔刀纠正。 根据守望先锋在GDC会议上对ECS架构的描述&#xff0c;所有的系统(system)都是由逻辑帧驱动的&#xff1a;每帧遍历所有的system&#xff0c;并调用system的update()更新游戏世界的状态。 在实际应用中这可能会存…
阅读更多...
缓存分片中的哈希算法与一致性哈希算法

缓存分片中的哈希算法与一致性哈希算法

什么是缓存分片 在高并发场景下&#xff0c;缓存往往成为了瓶颈。这时候&#xff0c;我们可以通过缓存数据分片的方式来解决问题。所谓缓存数据分片&#xff0c;就是将缓存数据按照一定的规则分成多个片段&#xff0c;每个片段由不同的缓存节点负责。这样做有两个好处&#xf…
阅读更多...
广告掘金全自动挂机项目，单设备30+【软件脚本+技术教程】

广告掘金全自动挂机项目，单设备30+【软件脚本+技术教程】

广告掘金项目是一种越来越受欢迎的赚钱方式&#xff0c;它通过观看广告视频来获取收益。然而&#xff0c;手动观看每个广告视频可能会耗费大量时间和精力。为了简化操作并提升效率&#xff0c;我们可以利用全自动挂机脚本来完成这一任务。接下来&#xff0c;将为您介绍如何使用…
阅读更多...
proxmox pve /dev/mapper/pve-root扩容

proxmox pve /dev/mapper/pve-root扩容

vgs3 pvs4 vgs5 lvs6 lvremove /dev/pve/data8 lvresize -l 100%FREE /dev/pve/root9 resize2fs /dev/mapper/pve-root 10 history
阅读更多...
爆肝整理，Pytest+Allure+Jenkins自动化测试集成实战（图文详细步骤）

爆肝整理，Pytest+Allure+Jenkins自动化测试集成实战（图文详细步骤）

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 1、简介 pytesta…
阅读更多...
宝塔FTP提示：553 Can‘t open that file: Permission denied的解决方案

宝塔FTP提示：553 Can‘t open that file: Permission denied的解决方案

[2023-10-18 15:16] 无法传输文件 ‘D:\phpstudy_pro\WWW\lockgis\static\js\coordtransform.js’。Cant open output connection for file “ftp://iot.test.net/lockgis/static/js/coordtransform.js”. Reason: “553 Can’t open that file: Permission denied”. 原因分析…
阅读更多...
美国国防部网络战略如何改变国家网络防御

美国国防部网络战略如何改变国家网络防御

十年前&#xff0c;时任国防部长莱昂帕内塔说了一句后来臭名昭著的短语&#xff1a;“网络珍珠港”。帕内塔利用他作为该国主要国家安全官员的平台来警告美国未来将遭受可怕的数字攻击。 他警告说&#xff0c;能源基础设施、交通系统、金融平台等都容易受到剥削。媒体、专家和…
阅读更多...
基于C语言 --- 自己写一个通讯录

基于C语言 --- 自己写一个通讯录

C语言程序设计笔记---039 C语言之实现通讯录1、介绍C/C程序的内存开辟2、C语言实现通讯录2.1、ContactMain.c程序大纲2.2、Contact2.h2.3、Contact2.c2.3.1 InitContact( )初始化通讯录函数2.3.2 AddContact( )添加联系人和CheckCapaticy( )检查容量函数2.3.3、ShowContact( )显…
阅读更多...
重大技术问题，iPhone 15 Pro Max面临“烧屏门”风波 | 百能云芯

重大技术问题，iPhone 15 Pro Max面临“烧屏门”风波 | 百能云芯

近期&#xff0c;社交媒体平台上陆续涌现大量用户和数码博主就iPhone 15 Pro Max出现烧屏问题的投诉与评论。 烧屏问题是OLED屏幕常见的一个缺陷&#xff0c;这是由OLED屏幕发光机制引发的&#xff0c;OLED屏幕可视为由无数微小的灯泡-像素点构成&#xff0c;这些像素点可以独立…
阅读更多...
redis场用命令及其Java操作

redis场用命令及其Java操作

目录 1. Redis入门 1.1 Redis简介 1.2 Redis下载与安装 1.2.1 Redis下载 1.2.2 Redis安装 1.3 Redis服务启动与停止 1.3.1 服务启动命令 1.3.2 客户端连接命令 1.3.3 修改Redis配置文件 1.3.4 Redis客户端图形工具 2. Redis数据类型 2.1 五种常用数据类型介绍 2.2 …
阅读更多...
【单片机基础】按键状态机实现短按、长按、双击、三击和N击

【单片机基础】按键状态机实现短按、长按、双击、三击和N击

下载地址&#xff1a; 【CSDNNaiva】源码&#xff1a;HK32F030M-按键扫描-短按长按检测 参考资料 [1] 【CSDNPillarPeng】【按键】[独立按键] - 1&#xff1a; 单击&#xff0c;双击&#xff0c;三击以及N击 [2] 【CSDNPillarPeng】【按键】[独立按键] - 2&#xff1a;双击 …
阅读更多...
git简介和指令

git简介和指令

git是一个开源的的分布式版本控制系统&#xff0c;用于高效的管理各种大小项目和文件 用途&#xff1a;防止代码丢失&#xff0c;做备份 项目的版本管理和控制&#xff0c;可以通过设置节点进行跳转 建立各自的开发环境分支&#xff0c;互不影响&#xff0c;方便合并 在多终端开…
阅读更多...
git pull 和 git fetch 有什么区别？

git pull 和 git fetch 有什么区别？

一、是什么 先回顾两个命令的定义 git fetch 命令用于从另一个存储库下载对象和引用git pull 命令用于从另一个存储库或本地分支获取并集成(整合) 再来看一次git的工作流程图&#xff0c;如下所示&#xff1a; 可以看到&#xff0c;git fetch是将远程主机的最新内容拉到本地…
阅读更多...
md5算法实现

md5算法实现

前言 md5算法是我们经常会用到的一个hash函数, 虽然已经被证明是不安全的了, 但其应用依然十分广泛. 哈希函数具有如下特点: 将任意长度的字符串映射为固定长度源数据微小的改动会导致结果差异巨大不可逆暴力破解困难 你有没有好奇过, 哈希函数是如何做到这些的呢? 本文就…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023