移动端常见布局（一）

1、单独制作移动端页面（主流）

● 流式布局（百分比布局）例：京东
● flex弹性布局（强烈推荐）例：携程
● less+rem+媒体查询布局 例：苏宁
● 混合布局
流式布局
● 流式布局，就是百分比布局，也称非固定像素布局
● 通过合资的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向俩侧填充
● 流式布局方式是移动web开发使用的比较常见的布局方式
● max-width最大宽度（max-height 最大高度）
● min-width最小宽度（min-height 最小高度）
flex弹性布局
● 操作方便，布局极为简单，移动端应用
● PC端浏览器支持情况较差
● IE11或更低版本，不支持或仅部分支持
注意：
1、如果是PC端页面布局，建议传统布局
2、如果是移动端或者不考虑兼容性问题的PC页面布局，建议使用flex弹性布局
布局原理：
flex是flexible Box的缩写，意为“弹性布局”，用来为盒装模型提供最大的灵活性，任何一个容器都可以指定为flex布局
● 当为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效
● 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局
采用Flex布局的元素，称为Flex容器（flex container），简称“容器”。它的所有子元素自动称为容器成员，称为Flex项目（flex item），简称“项目”
总结flex布局原理：
就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式
flex-direction设置主轴的方向
属性值
flex-direction属性决定主轴的方向（即项目的排列方向）
注意：主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的

属性值	说明
row	默认值从左到右
row-reverse	默认值从右到左
column	从上到下
column-reverse	从下到上

/*默认值从左到右*/
flex-direction:row;

justify-content设置主轴上的子元素排列方式
justify-content属性定义了项目在主轴上的对齐方式
注意：使用属性前需要确定主轴

属性值	说明
flex-start	默认值从头部开始 如果主轴是x轴，则从左到右
flex-end	从尾部开始排列
center	在主轴居中对齐（如果主轴是x轴则水平居中）
space-around	平分剩余空间
space-between	先俩边贴边 再平分剩余空间（重要）

flex-wrap设置子元素是否换行
默认情况下，项目都排在一条线（又称“轴线”）上。flex-wrap属性定义，flex不居中默认是不换行的

属性值	说明
nowrap	默认值，不换行
wrap	换行

align-items设置侧轴上的子元素排列方式（单行）
此属性为控制子项在侧轴（默认是y轴）上的排列方式 在子项为单项的时候使用

属性值	说明
flex-start	默认值 从上到下
flex-end	从下到上
center	挤在一起居中（垂直居中）
stretch	拉伸

align-content和align-items区别
● align-items适用于单行情况下，只有上对齐、下对齐、居中和拉伸
● align-content适应于换行（多行）的情况下（单行情况下无效），可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值
● 总结：单行找align-items多行找align-content
flex布局子项常见属性
● flex子项目占的分数
● align-self控制子项自己在侧轴的排列方式
● order属性定义子项的排列顺序（前后顺序）
flex属性
flex属性定义子项目分配剩余空间，用flex来表示占多少分数

div{
flex:<number>; /*default 0*/
}

align-self 控制子项自己在侧轴上的排列方式
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

span：nth-child(3){
/*设置自己在侧轴上的排列方式*/
align-self：fixed-end;
}

order属性定义项目的排列顺序
数值越小排列越靠前，默认是0

span：nth-child(2){
order:1;
}

2、响应式页面兼容移动端（其次）

● 媒体查询
● bootstrap