文章目录

一、分辨率分类
二、视口
三、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;}

HTML+CSS：移动端分辨率、视口、Flex布局、文字溢出显示省略号、溢出两行显示省略号相关推荐

flex 移动开发 html5,[ html5 ] 移动端适配方案 flex布局+rem布局
viewport视口 viewport是严格的等于浏览器的窗口.viewport与跟viewport有关的meta标签的关系,详细建议读一读这篇文章:移动前端开发之viewport的深刻理解,view ...
css日积月累系列---简易的flex布局使用sass和less 封装版
本文只是作日积月累的css 样式使用随着实际应用的开发,会越来越大 ,本css只是针对日常用到的.less 语法封装,适用antdesign- UI 后台管理系统开发 .font(@i) when(@ ...
移动端携程网首页flex布局完整制做(详细代码版)含footer部分
目录 1.样式展示 2.全部代码 2.1.index.htnl文件 2.2.index.css文件 3.分布研究 3.1 初始准备 3.2在index.css文件中写body的样式,引入字体图标等基本 ...
css专业名词,CSS进阶系列一（flex布局基础知识——介绍、规范、主要思想、专业术语）...
一.介绍 flex是flexible box的缩写,意为弹性布局.flexible box是CSS3新增加的,用来为盒模型提供最大的灵活性.flex旨在提供一个更加有效的方式来布置,对齐和分布在容器之 ...
html左右超出,css 横向超出滚动使用flex布局
描述横向超出滚动一般使用display:inline-block布局,元素里面东西比较多,想使用flex布局怎么办?可以使用下面的方法使用 Document .box { width: 700p ...
flex布局遇到white-space:nowrap怎么超出一行显示省略号
一.场景: 二.简化场景: 三.页面布局: <ul class="g-list"><li class="g-list-item">< ...
css基础精华---Flex 布局教程：实例篇
转载地址:http://www.ruanyifeng.com/blog/2015/07/flex-examples.html http://www.ruanyifeng.com/blog/2015/0 ...
Bootstrap4+MySQL前后端综合实训-Day01-AM【实训安排、HBuilder下载及使用、双飞翼布局（圣杯布局）案例、CSS在线手册、flex布局中的对齐方式】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记] 目录实训安排日常要求.项目要求项目开发流程 HTML+CSS+JavaScript 基 ...
好用的前端flex布局，通用的flex布局CSS代码
我的社交恐惧症,主要来自于,收入低??? 今天看到一个图,真是人间真实: 不知道大家上班之后有没有经常写前端,反正身为后端的我是经常写前端的,尤其是调样式调的人痛不欲生,最烦人的是,还要一个像 ...
CSS3动画大全(附源码)flex布局,grid布局3d旋转,图像模糊,文字发光
CSS3动画大全(附源码)3d旋转,图像模糊,文字发光! 文章目录 CSS3动画大全(附源码)3d旋转,图像模糊,文字发光! html代码 css grid布局 flex布局文字发光 & 图 ...

HTML+CSS：移动端分辨率、视口、Flex布局、文字溢出显示省略号、溢出两行显示省略号