（三）常用布局学习笔记-优快云博客

本文链接：https://blog.youkuaiyun.com/shushukaka/article/details/122275093

本文概述了现代前端布局的核心技术，包括flexbox布局的详细说明、vw和vh单位在响应式设计中的应用、Bootstrap风格的栅格系统，以及rem配合less和媒体查询进行移动端适配的方法。通过实例和原理讲解，提升网页设计的灵活性和响应性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

前言
一、flex布局
二、vw与vh
三、栅格系统
四、rem + less + 媒体查询
总结

前言

根据自己的开发经验以及网络资料总结了比较流行的布局方式

一、flex布局

1.可用于容器，可用于行内元素

2.父元素设为flex布局后，子元素的float、vertical-align、clear属性会失效

3.flex的六个属性

（1）.flex-direction 容器内的元素的排列方向（设主轴、侧轴）
flex-direction: row/column/column-reverse/row-reverse;

（2）.flex-wrap 容器内元素的换行
flex-wrap: no wrap/wrap;

（3）.flex-flow 1和2的集合
flex-flow: row no wrap/column wrap;

（4）.justify-content 元素在主轴上的排列

//主轴中间位置
justify-content: center;

center

//在主轴开始开始排
justify-content: flex-start;

flex-start

//在主轴结尾开始排
justify-content: flex-end;

flex-end

//由两端开始排
justify-content: space-between;

space-between

//各元素间隔，中间是两端的两倍
justify-content: space-around;

space-around
5.align-content 设置侧轴子元素的排列方式（多行），要有换行(flex容器有多余空间）

准备代码

//必需有换行的两行以上元素
align-content: center;

center

//必需有换行的两行以上元素
align-content: flex-start;

flex-start

align-content: flex-end;

flex-end

align-content:space-between;

space-between

align-content:space-around;

space-around

align-content:stertch;

stertch

6.align-item 设置测轴子元素排列方式,当一行子元素时（降版align-content）

align-items: flex-start/flex-end/baseline/stertch;

7.子项常见属性

flex: flex-grow flex-shrink flex-basis;
定义子项分配剩余空间
-flex-basis 分配固定的家产数量 （px）
-flex-grow 家产剩余家产仍有富裕如何分配（数字）
-flex-shrink 家产剩余家产不足如何分配（数字）

只有1个值时 表示flex-grow的值 flex-shrink默认为1，flex-basis为0%

//控制子项自己在侧轴上的排列方式
align-self: flex-start/flex-end/center/baseline/stretch;

//定义子项的排列顺序（越小越靠前，默认0）
order:0;

二、vw与vh

1.相对单位（类似em与rem）

vw:viewport width
vh: viewport height

2.相对视口的尺寸计算结果

1vw = 1/100 * 视口宽度
1vh = 1/100 * 视口高度

3.注：

-与百分比有区别，百分比相对于父元素来说，而vw与vh总是相对于视口
-大量除法、适应less搭配更好
-vw一般够用，一般不同时使用
-插件推荐：px2vw

三、栅格系统

-基于Bootstrap框架，现流行框架的栅格系统大致实现方法差不多

1.布局容器

Container类
-响应式布局容器，固定宽度
-大屏（>=1200px）宽度为1170px
-中屏（>=992px）宽度为970px
-小屏（>=768px）宽度为750px
-超小屏（100%）

Container-fluid类
-流式布局容器，百分百宽度
-占据全部视口容器
-适合于单独做移动端开发

2.栅格系统（grid system）

-系统自动分为最多12列（小于12列-空缺，大于12列-多余那一列换行显示。

设备	clsss
超小屏（手机）	col-xs-
小屏（平板）	col-sm-
中等屏（桌面显示器）	col-md-
宽屏（大桌面显示器）	col-lg-

-class名可指定多个达到响应式效果，每份默认左右15像素的padding。

-列嵌套：
不能加margin值，需要使用嵌套，默认的padding会有分隔效果；

列嵌套最好加一个行（class=“row”）可以取消父元素的padding值，高度自动与父元素对齐。

-列偏移
.col-md-offset-4（本质是加margin值）

-列排序
.col-xs-pull-3 拉（左移）
.col-xs-push-3 推（右移）

-响应工具
隐藏 .hidden-xs
显示 .visible-xs

四、rem + less + 媒体查询

1.rem适配布局
-rem单位（root em）相对单位，类似em（相对于父元素字体）
-rem的基准是相对于<html>标签的字体大小

2.less

-less变量

@变量名: 值;  eg: @color: pink;
//变量名不能以数字开头、可以有特殊符号；区分大小写

-less编译

.less-->.css
//插件easy.less

-less嵌套
子元素样式直接写到父元素中（内层）
如果有伪类或者交集，可用&代替父元素

a{
	...
	&:hover{
		...
}
}

-less运算

+、-、*、/
//除法运算要用括号框起来
//运算符之间有空格
//只有一个单位时，以第一个数字的单位为准
//颜色也可以计算

3.媒体查询
-根据不同屏幕尺寸改变不同样式

@media mediaType（媒体类型） and/not/only (关键词）(media faeture){
	css-code;
}

//媒体类型：
all 所有设备 
print 打印机
screen 用于电脑屏幕、平板、电脑、智能手机

//关键字
and 且 多个媒体特征
not 排除
only 指定 某个媒体特征

//媒体特性
width
min-width 大于等于
max-width 小于等于

4.布局实现：
-html标签使用font-size属性，其他布局基于html使用rem单位；使用媒体查询响应式改变html中的font-size属性大小