移动Web开发基础-flex弹性布局(兼容写法)

2021年6月25日 2点热度 0条评论 来源: 前端向朔

前言

前面我们已经分享过一篇 移动Web开发基础-百分比+flex布局方案 只是大概讲了下这种布局适配方案的思路,后面我们也通过分享 移动Web开发基础-比例盒子 让大家对百分比布局中比较常用的等比缩放有了比较好的处理方法,本文我们来了解下flex弹性布局,并重点了解移动端web页面中flex弹性布局的兼容写法。

flex初认识

Flex 是 Flexible Box 的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。

.box{ display: flex; }
.box{ display: inline-flex; }

因为弹性布局提出来的时间还是比较早的,到今天这个离2018年还有一个月的时间点上,我就暂且认为大家或多或少多flex布局有一定的认识吧,因为作为一个写CSS的同学,flex带来的布局方便性还是很大的,所以这里就简单介绍下,具体详细的属性可以学习大漠老师的这篇文章——Flexbox——快速布局神器

flex理解

说下我对于flex的理解,就下面几点。

一、两种元素display: flex;
采用 Flex 布局的元素,称为 Flex 容器(设置display),它的所有子元素自动成为容器成员,称为 Flex 项目,简称“项目”。

二、设置主轴
1.设置主轴方向:flex-direction: row/column;
主轴方向是 项目 的排列方向,默认水平方向row,项目 一行显示,也可以设置column,项目一列显示。主轴方向是主轴的延伸方向。

2.主轴方向富裕空间管理,是指项目之间的空间的管理

justify-content: flex-start/flex-end/center/space-between/space-around;

三、设置侧轴
设置好了主轴方向,就知道了主轴,与主轴垂直的即为侧轴,侧轴设置的项目排列方向,就是侧轴方向。
侧轴方向富裕空间管理:

align-items:  flex-start/flex-end/center/baseline;

四、其他属性设置
比如设置项目的排列顺序,项目的宽度等。
可以通过设置项目排列顺序,调整项目的位置,项目的宽度很常见的就是定宽元素和自适应元素的配合,只需要设置自适应的那个项目flex:1

.flex--flex-order { -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; -ms-flex-order: 2; -webkit-order: 2; order: 2 }
.flex--flex-grow-all > * { -webkit-box-flex: 1; -moz-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1 }

flex兼容

大家可能知道,flex是有好几个版本的,早期的flex写法是-webkit-box;,而且属性的差异比较大,大家可以先感受下定义一个容器的写法

.flex { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; }

设置主轴空间平均分配

.flex--justify-content--space-between {
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

可以看到写法还是比较繁杂和差异大的,所以接下来我们就来看下flex的兼容写法,这里我先建议大家阅读大漠老师的文章 使用Flexbox:新旧语法混用实现最佳浏览器兼容

最理想的办法是写一个浏览器插件,用插件设置好我们的布局之后生成兼容代码直接拷贝,感觉会比较爽,不知道有没有这种东西呢,好像之前有看过同学开发。

补充20180105

最近把上面说到的这个想法实现了,用vue写了一个Chrome浏览器插件,大家可以先预览一下,源码我已经开源到github上了,虽然不一定有人会去用。如果你希望用上它的话,可以到GitHub上下载下来,要是能顺手给个star就非常感谢了。https://github.com/xiangshuo1992/play-flexbox

width="100%" height="400" scrolling="no" title="EovGQe" src="//codepen.io/xiangshuo1992/embed/EovGQe/?height=265&theme-id=0&default-tab=html,result&embed-version=2" allowfullscreen="true">See the Pen <a href="https://codepen.io/xiangshuo1992/pen/EovGQe/">EovGQe</a> by Luke.Deng (<a href="https://codepen.io/xiangshuo1992">@xiangshuo1992</a>) on <a href="https://codepen.io">CodePen</a>.&#10;

补充完!有了这个插件,后面的这些话可以当笑话看了。

说下我的办法是,我把常用的这些布局写法写在一个txt文件里,然后用到flex布局的时候就拷贝出来,当然,如果是移动端页面,flex兼容写法里面可以去掉moz和ms前缀的写法了。

当然这也是在没有构建工具开发的情况下,我们也可以通过构建工具把这些兼容写法补全。

最后这里推荐一个CSS文件,把所有的写法都写到一个文件里了 https://gist.github.com/HeGanjie/0289b5b16e2ee4b16030

大家也可以直接拷贝如下代码:

.flex { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; }

.flex.flex--reverse { -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -webkit-box-direction: reverse; -moz-box-direction: reverse; -webkit-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; }

.flex--row { -webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-box-direction: normal; -moz-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; }

.flex--row.flex--reverse { -webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-box-direction: reverse; -moz-box-direction: reverse; -webkit-flex-direction: column-reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; }

.flex--justify-content--space-between { -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; }

.flex--justify-content--space-around { -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: distribute; -webkit-justify-content: space-around; justify-content: space-around; }

.flex--justify-content--center { -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; }

.flex--justify-content--start { -webkit-box-pack: start; -moz-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; }

.flex--justify-content--end { -webkit-box-pack: end; -moz-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; }

.flex--align-items--start { -webkit-box-align: start; -moz-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; }

.flex--align-items--end { -webkit-box-align: end; -moz-box-align: end; -ms-flex-align: end; -webkit-align-items: flex-end; align-items: flex-end; }

.flex--align-items--center { -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; }

.flex--align-items--baseline { -webkit-box-align: baseline; -moz-box-align: baseline; -ms-flex-align: baseline; -webkit-align-items: baseline; align-items: baseline; }

.flex--align-items--stretch { -webkit-box-align: stretch; -moz-box-align: stretch; -ms-flex-align: stretch; -webkit-align-items: stretch; align-items: stretch; }

/*.flex--flex-order { -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; -ms-flex-order: 2; -webkit-order: 2; order: 2 }*/
.flex--flex-grow-all > * { -webkit-box-flex: 1; -moz-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-grow: 1; flex-grow: 1 }
.flex--flex-grow-last :last-child { -webkit-box-flex: 1; -moz-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-grow: 1; flex-grow: 1 }

.flex--flex-grow-middle :nth-child(2) { -webkit-box-flex: 1; -moz-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-grow: 1; flex-grow: 1 }

.flex-center-wrapper { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; }
    原文作者:前端向朔
    原文地址: https://blog.csdn.net/u013778905/article/details/78679662
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。