flex布局应用与踩坑

1、预告

本文不是一篇入门的文章全部请符合如下条件的战斗人员绕道：

一、初学前端，对前端的传统布局还不是很熟悉的人

二、后端人员对前端不打算深刻学习的同窗

 

2、开篇

flex布局本来是好几个月前就一直想学习的东西，当时flex布局还算是比较新鲜的玩意，转眼间flex布局已经再也不新鲜，并且这些年，随着浏览器对ES6的支持状况日益加强，使得咱们愈来愈有必要去学习一下怎样去使用好flex布局，废话我也就很少说了，咱们就直奔主题吧

 

3、何为flex

 说到什么是flex这里就引用如下阮一峰老师的定义

布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局很是不方便，好比，垂直居中就不容易实现。

我认为flex布局最大的优点就是在其的“弹性”，“弹性”主要表如今flex布局不一样于盒子模型的百分比布局和CSS3支持的响应式布局，如下有几种状况是盒子模型中的这些布局所不便实现的：

一、浏览器的视口空间不足，要求视口中的特定块要按照比例进行缩放

二、应对一些布局是要以基准线(baseline)对齐的特殊布局方法

三、须要模块垂直居中

从应对一些特殊布局上来讲，使用flex确实比盒子模型的布局更是一种更优的解决方案

 

4、flex布局的基本语法回顾

 flex布局的语法比较的简单，首先咱们须要在父节点定义一个

display:flex;

接着咱们能够对整个flex进行子节点设置，来设置主轴上的子节点的排列顺序

flex-direction:column || row || column-reverse || row-reverse

可是这个时候主轴上面的每一个节点(item)，默认都是紧贴在一块儿的要么靠左要么靠右(flex-direction:row or flex-direction:row-reverse,且默认的justify-content:flex-start)，因此咱们须要经过justify-content来设置主轴上的item之间的排列方式

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

除了能够在主轴上面控制横向布局，还能够控制主轴上的元素的纵向布局

 align-items:flex-start || flex-end || center || baseline || stretch

上面说到的是单轴线的问题，可是flex布局不但能够解决单轴上面的布局，还能够解决多轴线上面的布局

align-content:flex-start || flex-end || stretch|| center || space-between || space-around

这个时候若是是有某个item须要从新调整布局的话，咱们可使用align-self:

align-self: auto | flex-start | flex-end | center | baseline | stretch;

除了这个属性还有flex这个属性，这个是用来定义item的百分比以及缩放的，其余的一些属性就不在这个一一列举：具体详见

Flex 布局教程：语法篇

 

5、一些flex的典型案例与坑

 一、随着flex-direction的改变，其余的一些属性也跟着改变

改变前的代码是：

<div style="height: 400px;width: 400px;border:1px solid black;display: flex;justify-content: center;">
        <div style="flex: 0 0 30%;background: red"></div>
        <!-- <div style="float: left"></div> -->
    </div>

 

运行的结果是：

图一

改变一下flex-diirection后，代码以下：

<div style="height: 200px;width: 400px;border:1px solid black;display: flex;justify-content: center;flex-direction: column;">
        <div style="flex: 0 0 30%;background: red"></div>
        <!-- <div style="float: left"></div> -->
    </div>

图二

上面的这个小例子告诉咱们，其实在应用flex的时候，咱们应该要注意一下justify-content,align-content,align-items这些属性是相对于主轴的位置来定义的，flex-direction的属性发生了变化，也就是主轴的位置发生了变化，天然这些属性也发生了改变（例如上面的justify-content是水平居中的，可是主轴flex-direction:column设置以后，就是垂直居中）

 

二、flex的子元素不受float的影响

<div style="height: 200px;width: 400px;border:1px solid black;display: flex;justify-content: center;">
        <div style="flex: 0 0 30%;background: red;height:30%;float: right"></div>
    </div>

效果参照图1

 

三、不能在display中嵌套absolute、relative，这样布局会失效

<div style="height: 200px;width: 400px;border:1px solid black;display: flex;justify-content: center;">
        <div style="width: 380px;height: 180px">
            <div style="flex: 0 0 30%;background: red;height:30%;"></div>
        </div>
    </div>

 运行效果以下：

 

四、flex-wrap的默认是nowrap，咱们须要设置才回自动换行

<div style="height: 200px;width: 400px;border:1px solid black;display: flex;justify-content: center;">
        <div style="flex: 0 0 30%;background: red;height:30%;"></div>
        <div style="flex: 0 0 30%;background: red;height:30%;"></div>
        <div style="flex: 0 0 30%;background: red;height:30%;"></div>
        <div style="flex: 0 0 30%;background: red;height:30%;"></div>
    </div>

运行效果以下：

 

6、flex布局使用注意事项

flex布局的兼容性不是太好，至少某些低版本的安卓机上面是不可以识别改布局的，可是整体上随着浏览器对H5属性的支持程度的提高，以及一些老式的安卓手机的淘汰，目前该布局在手机上面仍是有比较好的应用的，可是在使用flex布局的同时，建议仍是要搭配上gulp或者是grunt等自动化的工具来进行浏览器前缀的编译，这样一方面能够节约手动的去添加浏览器的兼容性前缀，另外的一方面是能够解觉手机上面不一样浏览器的差别致使的问题，通常来讲flex布局就是在手机上面使用的，在PC上面因为须要考虑到IE的支持程度的问题，因此在PC上面仍是不宜去使用flex。