Flex移动端布局

最新推荐文章于 2023-08-10 11:58:34 发布

weixin_33743880

最新推荐文章于 2023-08-10 11:58:34 发布

阅读量162

点赞数

原文链接：https://juejin.im/post/5c1a0f93e51d4544d544a496

版权

目前使用flex布局典型的网站有天猫和网易新闻。

首先，利用flex的项目不需要对viewport进行缩放，直接：

简单回顾一下flex的属性

一、设置在容器上的属性

1、flex-direction：属性决定主轴的方向（即项目的排列方向）。

2、flex-wrap：默认显示在一条轴线上，如果排不下如何换行。

3、flex-flow：flex-direction和flex-wrap的简写，默认为：row nowrap。

4、justify-cotent：在主轴上的对齐方式。

5、align-items：在交叉轴上的对齐方式。

6、align-content：定义了多条轴线的对齐方式，如果只有一条轴线，则不起作用。

二、设置容器里面单个项目的属性

1、order：定义项目的排序方式。

2、flex-grow：定义项目的放大比例，默认为0。

3、flex-shrink：定义项目的缩小比例，默认为1。

4、flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小

5、flex：flex-grow、flex-shrink、flex-basis的缩写。

6、align-self：允许单个项目有与其他项目不一样的对齐方式

具体的属性信息可以查看阮一峰写的flex布局教程(http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html)

注： place-content属性是 align-content和 justify-content属性的简写属性。

先来看一下天猫布局：

其整个页面都是flex布局，margin\padding\width\height等属性的值都是用px。

我挑选了天猫首页的某一块布局，写了一个demo(宽度写死为iphone8的尺寸375px)，大致如下：

模块分明，清爽灵活。

再来看一下网易新闻：

网易新闻移动端适配也是采用flex布局，和天猫不同的是width\height\padding\margin等属性值用的是rem。

其设计稿为750px，1rem为100px。

以iphone8为例：deviceWidth = 375，font-size = 375 / 7.5 = 50px，1rem为50px

兼容性处理：

安卓4.4以下的手机不支持flex布局。所以要做好兼容工作。

注意在写flex的时候加上：

  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;复制代码

关注