移动端的特点以及flex布局布局方式
移动端特点
移动端宽度一般取值范围 320-750 取值
视口
- width=device-width , initial-scale=1, maximum-scale=1.0 , minimum-scale=1.0 , user-scalable=no(或者0)
目标：设置用户代码片段
- 点开左下角齿轮，点击用户代码片段
- 在上面的输入框输入对应语言的代码片段（如果你想设置html的代码片段就输入html）
- ctrl+A全选 ctrl+v粘贴进去用户代码片段。保存即可。
百分百布局/流式布局
宽度自适应，高度固定
Flex布局 display: flex(添加给父元素)
改变主轴方向
- flex-direction : :column 列, 垂直
- row-reverse 行, 从右向左
- column-reverse 列, 从下向上
主轴对齐方式
- justify-content :
- flex-start 默认值, 起点开始依次排列
- flex-end 终点开始依次排列
- justify-content :center 沿主轴居中排列
- space-around 间隙环绕每一个子元素
- space-between 两端对齐剩下的盒子平分间隙
- space-evenly 让所有的间隙都相同
侧轴对齐方式
- align-items :
- align-items: start
- align-items: flex-end
- align-items: center;
让盒子垂直水平居中方式 jcc和aic
- display: flex; /* 垂直居中 / align-items: center; / 水平居中 */ justify-content: center;
伸缩比 flex
-
只占用父盒子剩余尺寸
-
flex : 1; 数值(整数)
-
例子
- 李狗蛋 松哥哥 (其他两人设定固定值,松哥占剩余的全部容量) 张翠花
弹性盒子换行
-
flex-wrap: wrap
- 让子元素超出盒子范围换行显示
-
align-content 是和flex-wrap 一起使用
移动端多行文字溢出显示省略号
display: -webkit-box; -webkit-box-orient: vertical; /* 限制显示的行数 */ -webkit-line-clamp: 2; overflow: hidden;
单行文字溢出显示省略号
/* 设置单行溢出隐藏,一定要先给盒子设置宽度,否则无效 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
\
