CSS布局：Flex、Grid、移动端适配方案

1.Flex弹性盒模型

​ 随着移动互联网的发展，对于网页布局来说要求越来越高，而传统的布局方案对于实现特殊布局非常不方便，比如垂直居中。

​ 2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

作用在flex容器上	作用在flex子项上
flex-direction	order
flex-wrap	flex-grow
flex-flow	flex-shrink
justify-content	flex-basis
align-items	flex
align-ccontent	align-self

2.flex-direction

​ flex-direction用来控制子项整体布局方向，是从左往右还是从右往左，是从上往下还是从下往上。

取值	含义
row	默认值，显示为行。方向为当前文档水平流方向，默认情况下是从左往右。
row-reverse	显示为行。但方向和row属性值是反的
column	显示为列
column-reverse	显示为列。但方向和column属性值是反的

3.flex-wrap

​ flex-wrap用来控制子项整体单行显示还是换行显示。

取值	含义
nowrap	默认值，表示单行显示，不换行
wrap	宽度不足换行显示
wrap-reverse	宽度不足换行显示，但是是从下往上开始，也就是原本换行在下面的子项现在跑到上面。

flex-flow

​ flex-flow属性是flex-direction和flex-wrap的缩写，表示flex布局的flow流动特性。第一个值表示方向，第二个值表示换行，中间用空格隔开。

4.justify-content

​ justify-content属性决定了主轴方向上子项的对齐和分布方式。

取值	含义
flex-start	默认值，表现为起始位置对齐。
flex-end	表现为结束位置对齐。
center	表现为居中对齐。
space-between	表现为两端对齐。between是中间的意思，意思是多余的空白间距只在元素中间区域分配。
space-around	around是环绕的意思，意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距，最终视觉上边缘两侧的空白只有中间空白宽度一半。
space-evenly	evenly是匀称、平等的意思。也就是视觉上，每个flex子项两侧空白间距完全相等。

5.align-items

​ align-items中的items指的就是flex子项们，因此align-items指的就是flex子项们相对于flex容器在侧轴方向上的对齐方式。

取值	含义
stretch	默认值，flex子项拉伸。
flex-start	表现为容器顶部对齐。
flex-end	表现为容器底部对齐。
center	表现为垂直居中对齐。

6.align-content

align-content可以看成和justify-content是相似且对立的属性，如果所有flex子项只有一行，则align-content属性是没有任何效果的。

取值	含义
stretch	默认值。每一行flex子元素都等比例拉伸。例如，如果共两行flex子元素，则每一行拉伸高度是50%。
flex-start	表现为起始位置对齐。
flex-end	表现为结束位置对齐。
center	表现为居中对齐。
space-between	表现为两端对齐。
space-around	每一行元素上下都享有独立不重叠的空白空间。
space-evenly	每一行元素都完全上下等分。

align-items和align-content的区别

前者是一行中每一个子项的排列后者是多行之间的对其方式。

7.作用在flex子项上的CSS属性

取值	含义
order	可以通过设置order改变某一个flex子项的排序位置。所有flex子项的默认order属性值是0。
flex-grow	属性中的grow是扩展的意思，扩展的就是flex子项所占据的宽度，扩展所侵占的空间就是除去元素外的剩余的空白间隙。默认值为0。
flex-shrink	属性中的shrink是“收缩”的意思，flex-shrink主要处理当flex容器空间不足时候，单个元素的收缩比例。默认值是1。
flex-basis	flex-basis定义了在分配剩余空间之前元素的默认大小。
flex	flex属性是flex-grow，flex-shrink和flex-basis的缩写。
align-self	align-self指控制单独某一个flex子项的垂直对齐方式。

flex的优先级会高于默认宽度，如果想要保留默认宽度需使用flex-grow

8.Grid网格布局

Grid布局是一个二维的布局方法，纵横两个方向总是同时存在。

8.1 grid-template-columns和grid-template-rows

​ 对网格进行横纵划分，形成二维布局。单位可以是像素，百分比，自适应以及fr单位（网格剩余空间比例单位）。

​ 有时候，我们网格的划分是很规律的，如果需要添加多个横纵网格时，可以利用repeat()语法进行简化操作。

​ 例：

grid-template-columns:1fr 1fr 1fr；//三行每行占1/3
grid-template-rows：100px auto 25%；//三列；第一列占100px，第二列自适应，第三列占剩下的25%。

8.2 grid-template-areas和grid-template

​ area是区域的意思，grid-template-areas就是给我们的网格划分区域的。此时grid子项只要使用grid-area属性指定其隶属于那个区。

写法为：

grid-template-areas:
"a1 a1 a1"
"a2 a2 a3"
"a2 a2 a3";
再将div调整为对应区域的数目，在div样式里
grid-area:a1；
grid-area:a2；
grid-area:a3；

​ grid-template是grid-template-rows，grid-template-columns和grid-template-areas属性的缩写。

符合写法：

grid-template:
"a1 a1 a1" 1fr
"a2 a2 a3" 1fr
"a2 a2 a3" 1fr
/1fr 1fr 1fr;

8.3 grid-column-gap和grid-row-gap

​ grid-column-gap和grid-row-gap属性用来定义网格中网格间隙的尺寸。

​ CSS grid-gap属性是grid-column-gap和grid-row-gap属性的缩写。先写的是行，后写的是列

8.4 justify-items和align-items

​ justify-items指定了网格元素的水平呈现方式，是水平拉伸显示，还是左中右对齐。align-items指定了网格元素的垂直呈现方式，是垂直拉伸显示，还是上中下对齐。调整的是内容在网格内的排列

​ place-items可以让align-items和justify-items属性写在单个声明中。先写的为纵向，后写的为横向。

取值	含义
stretch	默认值，拉伸。表现为水平或垂直填充。
Start	表现为容器左侧或顶部对齐。
end	表现为容器右侧或底部对齐。
center	表现为水平或垂直居中对齐。

8.4 justify-content和align-content

​ justify-content指定了网格元素的水平分布方式。align-content指定了网格元素的垂直分布方式。place-content可以让align-content和justify-content属性写在一个CSS声明中。先写的为纵向，后写的为横向。调整的是网格在容器内的排列

取值	含义
stretch	默认值，拉伸。表现为水平或垂直填充。
start	表现为容器左侧或顶部对齐。
end	表现为容器右侧或底部对齐。
center	表现为水平或垂直居中对齐。
space-between	表现为两端对齐。
space-around	享有独立不重叠的空白空间。
space-evenly	平均分配空白空间

8.5 作用在grid子项上的CSS属性

取值	含义
grid-column-start	水平方向上占据的起始位置。
grid-column-end	水平方向上占据的结束位置。（span属性）
grid-row-start	垂直方向上占据的起始位置。
grid-row-end	垂直方向上占据的结束位置。（span属性）
grid-column	grid-column-start + grid-column-end的缩写。
grid-row	grid-row-start + grid-row-end的缩写。
grid-area	表示当前网格所占用的区域，名字和位置两种表示方法。
justify-self	单个网格元素的水平对齐方式。
align-self	单个网格元素的垂直对齐方式。
place-self	align-self和justify-self的缩写。

span属性：span + 占的网格数

grid-column和grid-row复合写法：start / end

grid-area中第一个值是水平起始位置，第二个值是垂直起始位置，第三个值是水平结束位置，第四个值是垂直结束位置，中间用斜杠隔开。

place-self：先写的为垂直方向，后写的为水平方向

9.移动端

9.1 移动端模拟器？

​ 切换平台之后，一定要重新刷新浏览器。

9.2去访问一些网站的PC端和移动端？

​ 大一点的网站都是分开开发的，PC端一套代码，移动端端一套代码。

​

访问淘宝网 -> 后端检测当前设备 -> 如果是PC端 -> www.taobao.com

访问淘宝网 -> 后端检测当前设备 -> 如果是移动端 -> www.taobao.com重定向 -> h5.m.taobao.com

9.3 viewport视口？

​ 在移动端viewport视口就是浏览器显示页面内容的屏幕区域。在viewport中有两种视口，分别表示为， visual viewport（可视视口）和layout viewport（布局视口）。

​ visual viewport 固定大小跟屏幕大小相同，在上面，而layout viewport 可改变大小，在下面。Layout viewport默认大小为980像素，可通过document.documentElement.clientWidth获取。

​ 现代网页需要将layout viewport设置成跟visual viewport等同大小，方便进行网页制作。

9.4 Viewport设置

​ 通过标签进行设置，name属性指定viewport值，content属性进行视口配置。

取值	含义
width	设置layout viewport的宽度特定值，device-width表示设备宽。
height	设置layout viewport的高度特定值，一般不进行设置。
initial-scale	设置页面的初始缩放。
minimum-scale	设置页面的最小缩放。
maximum-scale	设置页面的最大缩放。
user-scalable	设置页面能否进行缩放。

10. 移动端适配方案

1.百分比布局，也叫流式布局。代表网站：优酷、百度、天猫、腾讯。

2.等比缩放布局，也叫rem布局。代表网站：网易、爱奇艺、淘宝、美团。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y5EPAuWn-1618798912722)(C:\Users\DSH\AppData\Roaming\Typora\typora-user-images\image-20201121140944464.png)]

流式布局原则

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ukJwVq1o-1618798912724)(C:\Users\DSH\AppData\Roaming\Typora\typora-user-images\image-20201121141036050.png)]

• 好处： 大屏幕下显示更多的内容。

• 坏处：宽屏下比例会有一些不协调。

rem布局

单位：

em : 是一个相对单位，1em等于当前元素或父元素的font-size值。

​ rem : 是一个相对单位，1rem等于根元素的font-size值。

​ vw / vh : 把屏幕分为100份，1vw等于屏幕宽的1%。

动态设置font-size

​ 通过JS：屏幕总宽/3.75

​ 通过VW:26.6667vw

o-1618798912724)]

• 好处： 大屏幕下显示更多的内容。

• 坏处：宽屏下比例会有一些不协调。

rem布局

单位：

em : 是一个相对单位，1em等于当前元素或父元素的font-size值。

​ rem : 是一个相对单位，1rem等于根元素的font-size值。

​ vw / vh : 把屏幕分为100份，1vw等于屏幕宽的1%。

动态设置font-size

​ 通过JS：屏幕总宽/3.75

​ 通过VW:26.6667vw

注：要给body重置一下font-size：16px