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

前言

前面我们已经分享过一篇 移动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-grow: 1;    -ms-flex-grow: 1;    flex-grow: 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：新旧语法混用实现最佳浏览器兼容。

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

说下我的办法是，我把常用的这些布局写法写在一个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;}