0.基本概念
采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。
1.传统固定布局:
实现方法:用width和height指定宽高px值、以及float浮动
缺点:有空白、且无法随浏览器窗口变化而调整大小和布局
2.百分比布局:
实现方法:用width和height指定宽高%值,以及float浮动
缺点:有空白
3.Flex伸缩布局:
实现方法:
3.1.给容器元素设置display:flex属性
3.2.通过给【项目】(容器内子元素)的flex属性,来设置项目比例。例如项目A的flex:1,项目B的flex:2,表示A与B的宽度为1:2
3.3.flex-direction排列方向(主轴):
row: 默认.把项目排列的主轴设置为水平方向,从左到右
row-reverse: 水平方向,从右到左
column: 垂直方向,从上到下
column-reverse: 垂直方向,从下到上
3.4.flex-wrap单行/多行:
nowrap: 默认.不换行
wrap: 换行
wrap-reverse: 倒序换行
3.5.justify-content主轴对齐方式:
flex-start: 向主轴起始位置靠拢对齐
flex-end: 向主轴结束位置靠拢对齐
center: 主轴方向居中
space-between: 两头对齐(中间空白)
space-around: 平均分布(两头、中间空白)
3.6.align-items侧轴对齐方式:
flex-start: 向主轴起始位置靠拢对齐
flex-end: 向主轴结束位置靠拢对齐
center: 主轴方向居中兼
baseline: 两头对齐(中间空白)
stretch: 平均分布(两头、中间空白)
4.响应式布局方案:
4.1.媒体类型:all、screen、print、tv、projection等
4.2.引入媒体类型两种方式:
@media print{
div{height:10px}
}
<link rel="stylesheet" href="style1.css" media="print"/>
4.3.媒体特性
max-width: 最大宽度
min-width:
device-width: 设备屏幕输出宽度
device-height: 设备屏幕输出高度
width: 渲染界面宽度
height: 渲染界面高度
orientation: portrait横屏/landspace竖屏
resolution: 分辨率
color: 每种色彩字节数
color-index: 色彩表中的色彩数
4.4.媒体查询语法:
@media [and/only/not] 媒体类型 and/only/not (媒体特性) {样式}
【举例】:
1.样式用于电脑显示屏和屏幕宽度小于1200px的设备
@media screen and (max-width:1200px){样式}
2.用于浏览器兼容。用于支持媒体类型(screen)却不识别媒体特性(max-width)的老浏览器
<link rel="stylesheet" href="sty.css" media="only screen and (max-width:500px)"/>
3.样式用于除打印机和屏幕小于1200px之外的所有设备
@media not print and (max-width:120px){样式}
5.响应式布局设计模式
布局不变,
内容挤压-拉伸
换行-平铺
增减内容
布局改变
模块位置变换
模块展示方式改变
模块数量改变
6.响应式布局两个前提:
6.1.能自动调整布局(弹性布局)
6.2.能自动感知设备大小