flexbox布局模式-- 浅谈

简介

Flexbox，一种CSS3的布局模式，也叫做弹性盒子模型，用来为盒装模型提供最大的灵活性。今天主要从以下几个方面简单谈谈flex.

• 1 版本更迭
• 2 flex容器
• 3 flex项目
• 4 flex布局兼容性

版本更迭

flexbox布局的语法规范经过几年发生了很大的变化。从2007年07月，flex第一版本的工作草案发布，到2012年09月，flex最新版本成为候选推荐。flex主要经历了三个版本：

• 1 旧版本 display:box | inline-box; IE浏览器不支持，windows下的safari浏览器只支持旧版本的写法且需要添加前缀，移动端可以兼容到andriod2.1-4.3和ios3.2-6.1也需要添加前缀
• 2 混合版本 display:flexbox | inline-flexbox; 该版本只有IE10支持，且需要添加前缀-ms-
• 3 新版本 display: flex | inline-flex 　　该版本兼容IE11+、firefox、safari、chrome、opera及移动端，但移动端ios7.1-8.4需要添加前缀-webkit-

flex内容

1 引入

我们之前用css给元素居中定位，经常用的方法是通过position和margin配合使用的那一种。举例如下：

<style>
.parent</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
    width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 600px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
    height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 400px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
    border</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 1px solid #000</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
    position</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> relative</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
.child</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
    width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 200px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
    height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 100px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
    border</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 1px solid #000</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
    position</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> absolute</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
    left</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 50%</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
    top</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 50%</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
    margin-left</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> -100px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
    margin-top</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">-50px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="background-color: #f5f5f5; color: #000000;">}</span>

</style>
</style>

<div class="parent">
<span style="color: #0000ff;">&lt;</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="child"</span><span style="color: #0000ff;">&gt;&lt;/</span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</span>

</div>

假如使用了flex后，实现起来就简单了，而且不需要自己去算，也不需要绝对定位，只需要通过对伸缩容器定义两个属性，justify-content定义伸缩项目沿着主轴线的对齐方式为center， align-items定义伸缩项目在侧轴（垂直于主轴）的对齐方式为center，具体如下：

<style>
    .parent{
        width: 600px;
        height: 400px;
        border: 1px solid #000;
        display: flex;  //需要将display值定为flex
        justify-content:center;
        align-items:center;
    }
    .child{
        width: 200px;  //宽度可以为任意
        height: 100px; //高度可以为任意
        border: 1px solid #000;    
    }
</style>
<div class="parent">
    <div class="child"></div>
</div>

首先我们来分析下面这一张图，从第一个子节点可以看到Flexbox由Flex容器和Flex项目组成，容器即父元素，项目即子元素。他们之间的一些关系可以这样来表示：

2 伸缩容器

　　display:flex

当我们使用flexbox布局时候，需要先给父容器的display值定位flex（块级）或者inline-flex（行内级）。当使用了这个值以后，伸缩容器会为内容建立新的伸缩格式化上下文（FFC flex formatting context普通流的一种）

主要表现在以下几点:

　　[1]float、clear和vertical-align属性在伸缩项目上没有效果

　　[2]伸缩容器的margin与其内容的margin不会重叠

　　[3]text-align属性在伸缩容器上没有效果，因为其只可应用于块级block容器

　　[4]另外，conlumns属性伸缩容器上没有效果

　　弹性盒模型的两种容器块级伸缩容器和内联伸缩容器的区别类似于block和inline-block的区别，一个独占一行，另一个非独占一行

以下6个属性作用在伸缩容器上

• 伸缩流方向 flex-direction
• 伸缩流换行 flex-wrap 　　
• 伸缩流(包括方向与换行) flex-flow 　　
• 主轴对齐 justify-content 　　
• 侧轴对齐 align-items 　　
• 堆栈伸缩行 align-content

3 伸缩项目

以下6个属性作用在伸缩容器上

• 自身侧轴对齐方式 align-self 　　
• 伸缩基准值 flex-basis 　　
• 扩展比率 flex-grow 　　
• 收缩比率 flex-shrink 　　
• 伸缩性 flex 　　
• 显示顺序 order

具体每个属性的取值以及作用，在这里就不一一解释了，上传一个含有详细内容的文档，供想要了解的人参考。

https://files.cnblogs.com/files/clearsky/flex.zip

 

 

具体可以参照这个图：

Flex兼容性

具体大家可以见这个网站：caniuse（http://caniuse.com/#search=flexb ox）  在PC端其实很乐观了，基本上主流的浏览器都已经兼容了flex的使用，但是到了移动端就不是那么好了，特别是国内浏览器，考虑到uc浏览器占了大头，但是uc从图中看到只兼容flex最老的一个版本，也就是2009年的版本，即display:box;很多现在flex的优秀特性到了它上面都不兼容了，所以建议大家在使用的时候，假如2009版本可以满足开发要求的话，还是去使用2009版本，这样风险更小。  但是假如想兼容多个浏览器，可以采用优雅降级的方式来使用，这里推荐一个scss的sass-flex-mixin,这样就可以使用最新的写法，并且兼容大部分浏览器了。