博客介绍了Flex布局的基本概念，包括容器和项目。对比传统固定布局、百分比布局的缺点，详细阐述了Flex伸缩布局的实现方法，如设置属性、排列方向、对齐方式等。还介绍了响应式布局方案，涵盖媒体类型、引入方式、特性、查询语法，以及设计模式和两个前提。
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.能自动感知设备大小
扫一扫
715
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
