移动端推荐布局方式

1. PC端与移动端的不同

1.1 PC端

屏幕大，网页固定版心用于约束页面主体内容分布

解析浏览器繁多，更多考虑兼容性问题。（布局： 浮动+定位+标准流）

1.2 移动端

手机屏幕小(width<768px)，网页宽度多数为100%，是适配手机屏幕宽度

移动端则基本不需要考虑兼容性问题，可以放心大胆的使用C3新特性

2. 移动端推荐布局--flex布局

2.1 flex属性值

flex属性值有很多,不过这里只给给大家详细介绍几种常用的属性值

2.1.1 flex-direction

决定主轴的方向(即项目的排列方向)

属性对应如下：(实际开发中column属性值更为常见)

row（默认值）：主轴为水平方向，起点在左端

row-reverse：主轴为水平方向，起点在右端

column：主轴为垂直方向，起点在上沿

column-reverse：主轴为垂直方向，起点在下沿

column

 

默认值:row

 

2.1.2 flex-wrap

弹性元素永远沿主轴排列，那么如果主轴排不下，通过flex-wrap决定容器内项目是否可换行

nowrap（默认值）：不换行

wrap：换行，第一行在下方

wrap-reverse：换行，第一行在上方(实际开发中不常用)

tips:只有弹性容器内的弹性盒子的总宽度>弹性容器的宽度时才会换行显示哦!

2.1.3 flex-grow

我们在某东、某米等商城移动端首页顶部,经常能见到的圣杯布局中,通常是左右固定,中间采用自适应的弹性伸缩来实现的,我们经常使用的[flex=1]就是flex-grow的简写,可以将弹性容器内的弹性盒子任意划分比例

2.1.4 justify-content

定义了项目在主轴上的对齐方式,这里只展现几种常用形式

space-between
两边对齐,中间自适应

space-around
1:2比例划分剩余空间

space-evenly
1:1比例划分剩余空间

 

2.1.5 align-items

定义项目在交叉轴上如何对齐,这里展示居中的案例(常用于移动端商城底部的工具栏)

常配合flex-direction及justify-content:center使用

center

 

2.1.6 align-content

定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

flex-start：与交叉轴的起点对齐

flex-end：与交叉轴的终点对齐

center：与交叉轴的中点对齐

space-between：与交叉轴两端对齐，轴线之间的间隔平均分布

space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍

stretch（默认值）：轴线占满整个交叉轴

2.1.7 align-self

允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性(这里给大家做个小案例)

center
flex-end

 包括现在在移动端、小程序这边的开发，都建议使用flex进行布局