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{
        width: 600px;
        height: 400px;
        border: 1px solid #000;
        position: relative;
    }
    .child{
        width: 200px;
        height: 100px;
        border: 1px solid #000;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -100px;
        margin-top:-50px;
    }
</style>

    
</style>
<div class="parent">

    <div class="child"></div>

</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

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

http://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,这样就能够使用最新的写法，而且兼容大部分浏览器了。