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）