Web前端开发笔记之CSS拓展07——Flex布局、移动适配、Less语法

最新推荐文章于 2025-12-05 07:37:55 发布

原创最新推荐文章于 2025-12-05 07:37:55 发布 · 498 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #css3

Web前端开发——CSS拓展专栏收录该内容

11 篇文章

订阅专栏

本文介绍了Flex布局的基础知识和应用场景，包括主轴与侧轴的对齐方式、多行排列、伸缩比等特性，并探讨了移动适配方案如rem和vw/vh单位的应用。

Flex布局：

移动适配：

Less语法：

Flex布局：

首先我们先看看上面这张图，我们一般会使用浮动排列一排li元素，然后再使用margin来空出中间的间隔。但是这样的方法会出现浮动脱标，我们还需要使用清除浮动来整理元素。

很显然，这样的方法有些繁琐，那么有没有简单一点的方法呢？Flex布局

让我们来了解了解它：

Flex布局模型：

主轴对齐方式：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Flex布局</title>
	<link rel="stylesheet" href="/Res/Css/SimpleStyle.css">
	<style>
		.box{
			display: flex;
			border: 1px solid black;
			width: 90%;
			margin: 0 auto;
			justify-content: space-around;
		}
		.box div{
			height: 200px;
			width: 20%;
            background-color: #ccc;
		}
        .box div:nth-child(2){
	        width: 30%;
        }
	</style>
</head>

<body>
<div class="box">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>
</body>
</html>

侧轴对齐方式：

默认情况下只要容器使用flex布局，无论加不加align-item，都会使子元素拉伸至父高度。

Flex伸缩比：

Flex修改主轴方向：

Flex多行排列：

当我们使用display:flex时，所有子元素会横向排列，我们在做下面的情景时，会出现问题。

但是我们想使用Flex结构，不想使用浮动。

这时，我们引入flex-wrap实现多行排列效果。

移动适配：

rem:目前多数企业在用的解决方案

vw/vh:未来的解决方案

rem:

rem-媒体查询：

实现等比缩放：

使用手淘flexible.js实现不同宽度实施不同html适配。

vw/vh:

这里需要注意的是当我们使用vw和vh时，同时只能选择一个来使用，不可以混合使用，主要是因为全面屏的存在。

Less语法：

使用Less语法快速编译生成CSS代码。

注释：

使用“//单行注释”，实现单行注释。

使用“/*多行注释*/”，实现单行注释。

运算：

嵌套：

变量：

导入：

导出：

第一种方法：使用配置文件修改，不同的IDE有不同的配置方法。

第二种方法：控制单一文件导出路径及控制导出文件的名字。

禁止导出：