文章目录
一、分辨率分类二、视口三、Flex布局3.1 justify-content 主轴对齐方式3.2 align-items 侧轴的对齐方式3.3 伸缩比 flex:value;3.4 flex-direction 改变元素排列方向3.5 flex-wrap 弹性盒子换行3.6 文字溢出显示省略号text-overflow: ellipsis一行文字溢出显示省略号两行文字溢出显示省略号一、分辨率分类
物理分辨率是生产屏幕时就固定的，它是不可被改变的逻辑分辨率是由软件（驱动）决定的制作网页参考物理分辨率还是逻辑分辨率？
逻辑分辨率
移动端主流设备分辨率
二、视口
使用meta标签设置视口宽度，制作适配不同设备宽度的网页
思考：默认情况下，网页的宽度和逻辑分辨率相同吗？
不同，默认网页宽度是980px。
解决办法：添加视口标签。
视口：显示HTML网页的区域，用来约束HTML尺寸
viewport：视口width=device-width：视口宽度=设备宽度initial-scale=1.0：缩放1倍（不缩放）
三、Flex布局
Flex布局/弹性布局：
是一种浏览器提倡的布局模型布局网页更简单、灵活避免浮动脱标的问题
作用
基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。Flex布局非常适合结构化布局
设置方式
父元素添加display: flex，子元素可以自动的挤压或拉伸
组成部分
弹性容器弹性盒子主轴使用justify-content调节元素在主轴的对齐方式侧轴 / 交叉轴
思考：网页中，盒子之间有距离吗？
答：有。在Flex布局模型中，调节主轴或侧轴的对齐方式来设置盒子之间的间距。
3.1 justify-content 主轴对齐方式
修改主轴对齐方式属性: justify-content
justify-content: flex-end;
justify-content: flex-start;
3.2 align-items 侧轴的对齐方式
align-items（添加到弹性容器）align-self：控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）3.3 伸缩比 flex:value;
flex : 值;取值分类数值(整数)
注意: 只占用父盒子剩余尺寸
3.4 flex-direction 改变元素排列方向
使用flex-direction改变元素排列方向
思考：Flex布局模型中，弹性盒子默认沿着哪个方向排列？
答：水平方向。思考：如何实现内容垂直排列？
主轴默认是水平方向, 侧轴默认是垂直方向
修改主轴方向属性: flex-direction
3.5 flex-wrap 弹性盒子换行
思考：默认情况下，多个弹性盒子如何显示？
弹性盒子换行显示: flex-wrap: wrap;调整行对齐方式：align-content
取值与justify-content基本相同
3.6 文字溢出显示省略号text-overflow: ellipsis
一行文字溢出显示省略号
.orders .goods .txt {flex: 1;/* 溢出的时候显示省略号 *//* 因为弹性盒子的尺寸可以被内容撑开, 不换行的文字可以撑开这个盒子的尺寸 */width: 0;}.orders .goods .txt h5 {text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
两行文字溢出显示省略号
.ellipsis-2 {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
