移动端与PC端布局的差异
1.PC端布局使用float浮动布局，而移动端使用flex布局。
- flex布局比起float更加方便快捷，但由于不兼容低版本ie9以下的浏览器，而移动端不使用ie浏览器，故flax布局在移动端布局是主流。
移动端使用pxcook需要更改二倍图
移动端要考虑流动布局
- 即宽度自适应，常设置flax：1或百分比数值
- 高度固定或常设置min-height或max-height
- 宽高要随着屏幕大小的改变而改变，从而凸显flax布局的重要性
Flex布局
什么是flex布局？
- flex布局是移动端的主要布局方式
为什么用flax布局？
- 1.对兼容性有要求，暂且不适用于pc端，故在移动端大放异彩
- 2.flax布局比float浮动布局更加方便快捷
flex布局的优点和缺点
- 1.布局简单，方便，页面渲染性能高
- 2.不会出现脱标和元素坍塌问题
- 3.兼容性较差，不兼容ie9以下浏览器
flex的组成
弹性父容器
- 父容器设置
display:flex;将父容器变成弹性盒子
弹性子盒子
-
两种情况
-
全部子盒子都设置
flex:1;- 每个子盒子等分父容器宽度
-
给n盒子设置
flex:1;其余盒子给固定宽度- 已设置宽度的盒子宽度定死，剩余n个设置flex盒子等分剩余宽度
-
主轴方向
-
设置对齐方式
-
justify-content
-
start：向左对齐
- 默认值
-
end：向右对齐
-
center：居中
-
space-between：间距出现在弹性盒子之间
-
space-around：间距出现在弹性盒子两侧
- 视觉效果: 子级之间的间距是父级左右两侧间距的2倍
-
space-evenly：父子级间距都相同
-
-
-
设置元素排列方向
- 给父容器设置flex布局后子盒子默认按主轴方向排列，即水平方向排列
- flex-direction
- row：从左向右排列（默认值）
- row-reverse:从右到左
- column:从上到下
- column-reverse:从下到上
-
设置子元素是否换行
- 主要目的：实现弹性盒子多行排列的效果，开发中常配合align-content属性使用
- flex-wrap
- nowrap：不换行显示（默认值）
- wrap：换行显示
侧轴方向
- 设置对齐方式
- 单行侧轴对齐方式
- align-items
- center：居中
- stretch：默认值， 拉伸
- flex-start：侧轴开始处对齐
- flex-end：侧轴结束处对齐
- align-self（控制某个弹性盒子）
- align-items
- 多行侧轴对齐方式
- align-content
- flax-start（侧轴开始对齐）
- flex-end（侧轴结束对齐）
- center（居中）
- space-between（两端对齐，中间平均分配）
- space-around（间距出现在弹性盒子两侧）
- 视觉效果: 子级之间的间距是父级左右两侧间距的2倍
- space-evenly（父子级间距都相同）
- align-content
- 单行侧轴对齐方式
