Flexbox 自由的布局

css3提出了一种新的布局方式.她并没有以摧枯拉朽之势博得我的喜爱.我和她的故事总是伴随着苦涩的味道.世道变了,总要做出些选择才能跟紧步伐.她很强大,能满足你天马行空的需求而不必抓掉一大把头发.她却很复杂,属性之多让我多次在门外观望.一回生,二回熟.来往多了,竟也混熟了. 原来了解其核心思想和原理便可拨开云雾见明月.

以前都是用float + position 来定位布局.用过float的都知道,会涉及到清除浮动的问题以及BFC(块级格式化上下文),容易出现问题开发也麻烦.后来使用inline-block 布局规避掉清除浮动的问题,还能自适应内容宽度. 还能通过vertical-align:middle 来解决垂直居中的问题,但是移动开发的大潮来袭,inline-block对响应式布局上终究显得力不从心.伸缩盒模型应运而生,能轻松的解决诸如垂直居中,自适应,拉伸,响应式等等问题.让开发者从各种hack和多版本开发的重复劳动中解脱. 我个人认为这是非常有意义的.为了有一个直观的理解,咱们来看一些常见的布局,用flexbox是怎么做的:

 

1.  几个div水平排列,类似inline-block的效果

 可见只需要在父容器上设定一个display:flex 便可实现该效果,非常简单.

 

2.  垂直居中

 

3.  2栏自适应布局

4.  圣杯布局

 

Flexbox--弹性盒模型

弹性盒子模型的出现是为了满足当今各种设备尺寸的自适应问题.它规定了一系列语法来表述项目如何在一个弹性盒子模型中自适应排列.这个盒子相对于其他元素是独立的,可以把它看成一个block元素,也可以是inline元素.它的语法可以分成2部分来看:

 

对于弹性盒子的描述

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

 

对于盒子中元素的描述

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

 

 

按术语分类

flexbox的属性比较多,我们需要配合它的基本设计概念来辅助记忆.根据上图,我们按术语进行分类:

 

• 弹性容器(Flex container)　　

　　　包含着弹性项目的父元素。通过设置 display 属性的值为 flex 或 inline-flex 来定义弹性容器。

• 弹性项目(Flex item)

  弹性容器的每个子元素都成为弹性项目。弹性容器直接包含的文本将包覆成匿名弹性项目。

• 轴(Axis)

  每个弹性框布局包含两个轴。弹性项目沿其依次排列的那根轴称为主轴(main axis)。垂直于主轴的那根轴称为侧轴(cross axis)。

  • flex-direction 属性确立主轴。
  • justify-content 属性定义了在当前行上弹性项目沿主轴如何排布。
  • align-items 属性定义了在当前行上弹性项目沿侧轴默认如何排布。
  • align-content 属性定义了在多行上弹性项目沿侧轴默认如何排布.
  • align-self 属性定义了单个弹性项目在侧轴上应当如何对齐，这个定义覆盖由align-items 所确立的默认值。

• 方位(Direction)

  弹性容器的各个边（主轴起点(main start)/主轴终点(main end)和侧轴起点(cross start)/侧轴终点(cross end)）描述了弹性条目流的起点与终点。它们具体取决于弹性容器的主轴与侧轴以及由 writing-mode 确立的方向（从左到右、从右到左，等等）。

  • order 属性将元素与序号组关联起来，并决定哪些元素先出现。
  • flex-flow 属性是 flex-direction 和 flex-wrap 属性的简写，决定弹性项目如何排布。　　　　　

• 行(Line)

  根据 flex-wrap 属性，弹性项目可以排布在单个行或者多个行中。此属性控制侧轴的方向和新行排列的方向。

• 尺寸(Dimension)

  根据弹性容器的主轴与侧轴，弹性项目的宽和高相应称为主轴尺寸(main size) 与 侧轴尺寸(cross size)。

  • min-height 与 min-width 属性初始值为 0。
  • flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写，确立弹性项目的伸缩性。

  

新旧语法对比

 

了解概念是学习一个东西的基石.可是要完成一个东西,经验是最宝贵的.学习的目的就是去使用,提高效率.纸上谈兵毫无意义.由于伸缩盒的规范经历了好几次大版本的修改,造成多个版本共同存在.

 

    2009年7月 工作草案 (display: box;)　　https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/
    2011年3月 工作草案 (display: flexbox;)
    2011年11月 工作草案 (display: flexbox;)　https://www.w3.org/TR/2011/WD-css3-flexbox-20110322/
    2012年3月 工作草案 (display: flexbox;)
    2012年6月 工作草案 (display: flex;)

    2012年9月 候选推荐 (display: flex;)　　https://www.w3.org/TR/2012/WD-css3-flexbox-20120612/

上图列出了09年版和2012版的语法对比,11年的过渡语法版本就不说了. 目前就IE11支持.

由于09年版语法对多行支持不好，因此你最好在一个flex容器内仅包含一行子元素。

 

跨浏览器兼容

 

比较有趣的是,09年版支持情况非常好,除了ie.

兼容性方案的处理是,写09年,和12年版本伸缩盒标准语法,以及相应的浏览器厂商前缀.跨浏览器写法支持任意安卓和ios

 

09年版:

 12年版:

 

 

经验tips

 

伸缩盒兼容

.page-wrap {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
 }

 

子元素按比例分配兼容

.page-item {
   width: 20%;               /* For old syntax, otherwise collapses. */
  -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1;         /* OLD - Firefox 19- */
  -webkit-flex: 1;          /* Chrome */
  -ms-flex: 1;              /* IE 10 */
  flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
} 

 

其中的width属性非常重要,你可以设置任意值,但必须要有.如果不设,在某些浏览器上会出现无法正确按设定的比例分配剩余空间的情况.

 

 

参考

• 伸缩盒新旧语法详细查询 flexbox
• 我个人比较推荐阮一峰的2篇文章Flex布局-语法篇,Flex布局-实例篇 . 看过之后基本就知道如何使用flexbox布局了. 在此不做详细探讨.
• W3C制定标准流程:

  工作草案（Working Draft）
  最终公示（Last Call）
  候选推荐标准（Candidate Recommendation）
  提名推荐标准（Proposed Recommendation）
  推荐标准（Recommendation）