弹性布局
弹性布局,又称“Flex布局”,是由W3C于2009年推出的一种布局方式。可以简便、完整、响应式地实现各种页面布局。而且已经得到所有主流浏览器的支持,我们可以放心大胆的使用。
使用方式
前提
- 需用一个容器,父元素
- 项目,每个子元素就是一个项目
了解
-
主轴: 在弹性布局中,我们会通过属性规定水平/垂直方向为主轴;
-
交叉轴: 与主轴垂直的另一方向,称为交叉轴。
这里是引用
使用
- 为父元素添加属性
display:flex
(显示为块级元素)即可容器来进行弹性布局 display:inline-flex
显示为行级元素- flex的几种属性
flex-direction
决定布局方向:row(默认值)主轴方向为水平反向起点在左端,row-reverse
起点在又端,column
:主轴为垂直方向,起点在上方,column-reverse
起点在下方。
flex-wrap
如果一条轴线排不下是否换行nowrap
(默认值)不换行
wrap
(换行),wrap-reverse
从下往上换行justify-content
属性定义子项在主轴上的对齐方式。
flex-start
(默认值):子项位于主轴起点对齐
flex-end
:子项位于终端点对齐
center
:居中
space-between
:两端对齐,字项之间的间隔都相等。(开头和最后的项目,与父容器边缘没有间隔)
space-around
每个子项两端的外边距相等align-items
flex-start:交叉轴的起点对齐。
flex-end
:交叉轴的终点对齐。
center
:交叉轴的中点对齐。
baseline
: 项目的第一行文字的基线对齐。(文字的行高、字体大小会影响每行的基线)
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。- align-content属性定义了多根轴线的对齐方式。
flex-start
:与交叉轴的起点对齐。
flex-end
:与交叉轴的终点对齐。
center
:与交叉轴的中点对齐。
space-between
:与交叉轴两端对齐,轴线之间的间隔平均分布。
space-around
:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
stretch
(默认值):轴线占满整个交叉轴。flex-grow
属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
流式布局
流式布局也叫响应式布局
特点:
- 宽度自适应,高度写死,并不是百分百还原设计图。
- 图标都是固定死大小的,包括字体等也是固定死的。并不是所有的东西都是自适应的。
- 一些大的图片,设置宽度为百分比自适应即可,随着屏幕大小进行变化,对于小图标或者文本等, 一般都是定死宽高大小。
经典的流式布局
- 左侧固定,右侧自适应
- 右侧固定左侧自适应
- 两侧固定,中间自适应(圣杯布局)
- 等分布局
响应式布局
em和rem的区别:
em以父级元素为参考;rem以根元素为参考。
媒体查询:
语法:
@media 媒体类型 and|not|only (媒体特性){
CSS-code
}
媒体类型:all(全部)、print(打印机)、screen(电脑、平板、智能手机屏幕等)
媒体查询引入CSS资源:
<link rel="stylesheet" media="媒体类型 and|not|only (媒体特性)" href="mystyle.css">