兼容型

概述

从2009年提出的最初草案开始，Flexbox布局经历了多次的迭代和几个语法版本的变更。详细可以参考官方说明 CSS Flexible Box布局模块

浏览器对最新flexbox规范的支持情况为：

• Chrome 29+
• Firefox 28+
• Internet Explorer 11
• Opera 17+
• Safari 6.1+ (prefixed with -webkit-)
• Android 4.4+
• iOS 7.1+ (prefixed with -webkit-)

更多关于 flexbox 兼容型可以从 Can I Use 中查看 http://caniuse.com/#feat=flexbox

参考文章

关于新旧浏览器兼容型写法，可以参考以下文章

• 使用Flexbox：新旧语法混用实现最佳浏览器兼容
• “老”的Flexbox和“新”的Flexbox
• 时下Web App中的Flexbox应用
• 探索Flexbox
• 一个完整的Flexbox指南 该文章介绍的比较全面
• flewbox bug 整理
• Flewbox 相关文章
• Flexbox 非常容易 制作 CSS 布局
• Flex弹性布局在移动设备上的应用
• Flexbox 非常容易 制作 CSS 布局

兼容性写法例子

主轴方向

从左向右排列

从右向左排列

从上向下排列

从下向上排列

示例代码

flex-direction.md

<style>

.flex-container {
  display: -webkit-box;  /* 老版本语法: Safari 3.1-6,  iOS 6-, Android browser, older WebKit browsers.  */
  display: -moz-box;    /* 老版本语法: Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;  /* 混合版本语法: IE 10 */
  display: -webkit-flex;  /* 新版本语法： Chrome 21+ */
  display: flex;       /* 新版本语法： Opera 12.1, Firefox 22+ */
}

.direction-row {
  -webkit-flex-direction: row; /* Safari */
  flex-direction: row;
}

多列和多行布局（没有找到更好的兼容型写法，有 box-lines 属性，但支持性不是很好）

如果想要实现多行和多列布局，我们可以采取 float 布局来实现。也可以通过判断 flex-wrap 支持性来动态设置 css 样式

  /**
   * 判断样式在浏览器中是否支持
   * @param styleProp
   * @returns {boolean}
   */
  function styleSupport(styleProp) {
    const prefix = ['webkit', 'moz', 'ms'];
    const $el = document.createElement('div');
    const styleText = $el.style;
    if (styleText[styleProp] !== undefined) {
      return true;
    }

    for (let i = 0; i < 3; i++) {
      const _styleProp = prefix[i] + styleProp[0].toUpperCase() + styleProp.substring(1);
      if (styleText[_styleProp] !== undefined) {
        return true;
      }
    }
    return false;
  }

  styleSupport('flexWrap');

主轴方向对齐方式

左对齐 flex-start

右对齐 flex-end

居中 center

两端对齐 space-between

平均分布 space-around

示例代码

justify-content.md

<style>
.flex-container {
  display: -webkit-box;  /* 老版本语法: Safari 3.1-6,  iOS 6-, Android browser, older WebKit browsers.  */
  display: -moz-box;    /* 老版本语法: Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;  /* 混合版本语法: IE 10 */
  display: -webkit-flex;  /* 新版本语法： Chrome 21+ */
  display: flex;       /* 新版本语法： Opera 12.1, Firefox 22+ */
}

.flex-start{
  /*老版本语法*/
  -webkit-box-pack: start;
  -moz-box-pack: start;
  /*混合版本语法*/
  -ms-flex-pack: start;

侧轴排列方式

侧轴的起点对齐 flex-start

侧轴的终点对齐 flex-end

侧轴的中点对齐 center

按照子元素第一行文字的基线对齐 baseline

填满容器 stretch

示例代码

align-items.md

<style>
.flex-container {
  display: -webkit-box;  /* 老版本语法: Safari 3.1-6,  iOS 6-, Android browser, older WebKit browsers.  */
  display: -moz-box;    /* 老版本语法: Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;  /* 混合版本语法: IE 10 */
  display: -webkit-flex;  /* 新版本语法： Chrome 21+ */
  display: flex;       /* 新版本语法： Opera 12.1, Firefox 22+ */
}

.align-items-start {
  /*老版本语法*/
  -webkit-box-align: start;
  -moz-box-align: start;
  /*混合版本语法*/
  -ms-flex-align: start;

多行侧轴方向对齐方式

与侧轴的起点对齐 flex-start

与侧轴的终点对齐 flex-end

与侧轴的中点对齐 center

与侧轴两端对齐 space-between

每行平均分布 space-around

各行占满整个侧轴线 stretch

示例代码

align-content.md

<style>
.flex-container {
  display: -webkit-box;  /* 老版本语法: Safari 3.1-6,  iOS 6-, Android browser, older WebKit browsers.  */
  display: -moz-box;    /* 老版本语法: Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;  /* 混合版本语法: IE 10 */
  display: -webkit-flex;  /* 新版本语法： Chrome 21+ */
  display: flex;       /* 新版本语法： Opera 12.1, Firefox 22+ */
}

.align-content-start {
  /*混合版本语法*/
  -ms-flex-line-pack: start;
  /*新版本语法*/
  -webkit-align-content: flex-start; /* Safari */
  align-content: flex-start;