- vw:1vw 等于视口宽度的1%
- Vh:1vh 等于视口高度的1%
由于使用vw、vh依赖于视图窗口,故当屏幕分辨率变大或者缩小,尺寸会进行相应的放大或者缩小,当页面足够大,或者足够小时,尺寸会变得很大或者很小
浏览器高度950px,宽度为1920px, 1 vh = 950px/100 = 9.5 px,1vw = 1920px/100 =19.2 px
弹性盒子
Flex 布局,可以简便、完整、响应式地实现各种页面布局
.box{
display: flex;
}
Webkit 内核的浏览器,必须加上-webkit
前缀。
设为 Flex 布局以后,子元素的
float
、clear
和vertical-align
属性将失效。
Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做
main start
,结束位置叫做main end
;交叉轴的开始位置叫做cross start
,结束位置叫做cross end
。
容器的属性
1.justify-content
属性定义了项目在主轴上的对齐方式
flex-start:
(默认值)左对齐flex-end
:右对齐center
: 居中space-between
:两端对齐,项目之间的间隔都相等。space-around
:每个项目两侧的间隔相等。- space-evenly:每两个项目之间的距离 与 边沿项目距离容器之间的距离相等
2.align-items
属性定义项目在交叉轴上如何对齐
flex-start
:交叉轴的起点对齐 居上对齐flex-end
:交叉轴的终点对齐 居下对齐center
:居中对齐baseline
: 项目的第一行文字的基线对齐。stretch:
默认值:如果项目未设置高度或设为auto,将占满整个容器的高度。
3.flex-direction
属性决定主轴的方向(即项目的排列方向)
row:
(默认值)主轴为水平方向,起点在左端。row-reverse
:主轴为水平方向,起点在右端。column
:主轴为垂直方向,起点在上侧。column-reverse
:主轴为垂直方向,起点在下侧。
4.flex-wrap
属性定义,如果一条轴线排不下,如何换行。
当容器空间不足时,项目比列缩小
空间有剩余,项目部会变大
nowrap:
(默认)不换行wrap
:换行,第一行在上方wrap-reverse
:换行,第一行在下方
flex-flow
属性是flex-direction
属性和flex-wrap
属性的简写形式,默认值为row nowrap
。
5.align-content
属性定义了多根轴线的对齐方式
flex-start
:项目整体与交叉轴的起点对齐。居上flex-end
:项目整体与交叉轴的终点对齐。居下center
:项目整体与交叉轴的中点对齐。居中space-between
:每两行之间的距离相等。space-around
:每一行两侧的间隔都相等。- space-evely: 每两行之间的距离 与 边沿项目距离容器之间的距离相等
stretch
(默认值):轴线占满整个交叉轴