武汉传媒学院
3.1 将固定像素大小转换为弹性比例大小
• display:table/table-cell问题： • 表元必须包在表格中 • 不能把表元包到多行上
武汉传媒学院
3.2 Flexbox概述 • Flexbox:Flexible Box的缩写，意为”弹 性布局”，用来为盒状模型提供最大的灵 活性
浏览器 W3C规定 IE Chrome、Safari Firefox
武汉传媒学院
3.3 使用Flexbox
•Flexbox4个特性： •方向 •对齐 •次序 •弹性
武汉传媒学院
3.3 使用Flexbox • 垂直居中文本
例3-3
• display:flex:将当前元素设置成Flexbox • align-items:沿交叉轴对齐项目 • justify-content:沿主轴对齐
• align-items:内部元素都会生效 • align-self:对某一个元素生效
武汉传媒学院
3.3 使用Flexbox
• align-items/self： • flex-start：父元素顶部 • flex-end：父元素底部 • center：父元素中间 • baseline：项目的第一行文字的 基线对齐 • stretch：拉伸至与父元素一样大
• min-height: 100%;
武汉传媒学院
3.3 使用Flexbox
• 改变原始次序： • 传统方式; • 开头： display:table-caption • 第二位： display:table-header-group • 底部： display:table-footer-group
武汉传媒学院
3.3 使用Flexbox
• 垂直排列： • 将flex-direction设置成column • 将margin属性删除
• 垂直反序 • 将将flex-direction设置成columnreverse
武汉传媒学院
3.3 使用Flexbox
• 不同媒体查询中的不同Flexbox布局
• 行内伸缩
例3-6
• 将盒子元素设置成： display: inline-fFlexbox
• Flexbox的对齐 • 坐标轴
主轴
row column X Y
交叉轴
Y X
武汉传媒学院
flex-direction
3.3 使用Flexbox
• Flexbox可以嵌套 P46
<img srcset=”small.jpg 450w ,medium.jpg 900w” 450像素宽
sizes=”(min-width:17em) 100vw , (min-width:40em) 50vw” 100% src=”small.jpg”> 视口宽度
武汉传媒学院
3.4 响应式图片 • picture元素 <picture> <source media=”(media-width:30em)” srcset=”cake-table.jpg” <source media=”(meida-width:60em)” srcset=”cake-shop.jpg”> <img src=”scones.jpg”> </picture>
例3-5
• flex-direction: column;/*flexbox中设置垂直 布局*/ • @media (min-width: 31.25em) { .MenuWrap { flex-direction: row; } }/*大屏幕中采用行布局*/
武汉传媒学院
3.3 使用Flexbox
武汉传媒学院
3.4 响应式图片
•通过srcset切换分辨率
<img src=”small.jpg” srcset=”medium.jpg 1.5x , large.jpg 2x”>
2倍分辨率 宽度
1倍分辨率 宽度
1.5倍分辨率 宽度
武汉传媒学院
3.4 响应式图片
• srcset及sizes联合切换
• 项目默认沿主轴排列 • 单个项目占据的主轴空间叫做main size， 占据的交叉轴空间叫做cross size
武汉传媒学院
3.2 Flexbox概述
武汉传媒学院
3.2 Flexbox概述 • 浏览器对Flexbox的支持： • IE9以下不支持Flexbox • 跨浏览器使用需要加前缀
前缀 无 -ms-webkit-moz-
武汉传媒学院
3.3 使用Flexbox
• 改变原始次序：
例3-9
•order:序号
-1表示在所有 元素上方
武汉传媒学院
3.4 响应式图片
• 响应式图片固有问题： • 只有浏览器打开页面时才知道使用设 备情况 • 只有开发者知道有几种大小的图片 •目标：让浏览器知道有什么图片，让浏 览器根据情况进行选择
武汉传媒学院
武汉传媒学院
武汉传媒学院
3.3 使用Flexbox • justify-content： • flex-start（默认值）：左对齐 • flex-end：右对齐 • center： 居中 • space-between：两端对齐，项目之间的 间隔都相等。 • space-around：每个项目两侧的间隔相 等。所以，项目之间的间隔比项目与边 框的间隔大一倍。
元素
结果小数点 向右移2位
包含元素 的容器
武汉传媒学院
3.1 将固定像素大小转换为弹性比例大小
•放大效果
例3-1
•缩小效果
例3-2
武汉传媒学院
3.1 将固定像素大小转换为弹性比例大小 • display:inline-block问题： • 会在HTML元素间渲染空白 • 行内块中垂直居中 • 做不到让两个相邻元素一个宽度固定，另一个 填充剩余空间 • float的问题： • 浮动元素宽度设定成百分比时，不同平台上的 计算结果不一致 • 通常要清除浮动，才能避免父盒子子/元素折 叠
武汉传媒学院
3.3 使用Flexbox
• 偏移
例3-4
• .LastItem {
margin-left: auto;
}
使用所有可用的 左外边距
武汉传媒学院
3.3 使用Flexbox
• 反序： • 给弹性盒子CSS添加: flex-direction:row-reverse;
• 将最后一项元素的CSS改成: margin-right: auto;
武汉传媒学院
武汉传媒学院
3.3 使用Flexbox • flex属性：设计宽度 • flex-grow:伸展比例 • flex-shrink:缩小比例 • flex-basis:基准(像素/百分比/auto) 不伸缩情况 下的大小
例3-7
武汉传媒学院
3.3 使用Flexbox
• 粘附页脚
例3-8
武汉传媒学院
知识回顾
• 媒体查询：根据视口大小切换不同样式
• 如何实现“断点”间平滑过渡？？？
弹性布局
武汉传媒学院
目录
•将固定像素大小转换为 弹性比例大小 •Flexbox概述 •使用Flexbox •响应式图片
武汉传媒学院
3.1 将固定像素大小转换为弹性比例大小
• 弹性布局：网站宽度以百分比形式定义， 网页宽度随着屏幕窗口大小变化 • 固定布局：网站宽度是一个像素值 • 转换公式： 比例=目标/上下文
不支持picture浏览器 或没有合适媒体定义时的后备
武汉传媒学院
屏宽度幕在30em以上 使用的图片3.4 响应式图 片
3.4 响应式图片
• WebP图片格式
<picture> <source type=”image/webp” srcset=”pic.webp”> 指定
图片类型
<img src=”pic.jpg”> </picture>
• 任何容器都可以指定为Flex布局
• 采用Flex布局的元素，称为Flex容器（fle x container） • 它的所有子元素称为Flex项目（flex item ）
武汉传媒学院
3.2 Flexbox概述 • 容器默认存在两根轴： • 水平的主轴（main axis） • 垂直的交叉轴（cross axis）