[css知识体系]flexbox模型

背景

flexbox 模型的产生主要是为给布局、对齐和容器内的空间分配提供一个更有效的方法，即使尺寸未知或是动态改变的（flex，收缩，弹性就是为此命名）。

flex布局使得容器能够改变子元素的宽高来更好的填充可用空间，它既可以扩大子元素填充可用空间也可以收缩以防止溢出。

最重要的是，相对于传统的规则布局（block是垂直排列，inline是横向排列），flexbox布局方向是可以改变的。

基础与术语

flexbox并非单独属性而是一个完整模型，它包含一系列属性。一些属性设置在容器（flex container）上而另一些是设置在子元素上（flex items）。

规则布局是基于block和inline flow directions，flex 布局则基于"flex-flow directions"。请看下面图解。

简单来说，items的布局方向沿着主轴和侧轴。

flex container的属性：

display

display定义一个flex container是行内元素还是块级元素，取值是：

flex
inline-flex

注意：这只是指定容器是inline还是block，对于子元素并没有影响。

flex-direction

row (默认值): 与文本方向相同，比如一般是ltr
row-reverse: 与文本方向相反
column: 和row一样，不过是从顶部到底部
column-reverse: 和row一样不过是从底部到顶部

flex-wrap

nowrap（默认值）: 单行，与文本方向一致
wrap：多行，与文本方向一致
wrap-reverse: 多行，与文本方向相反

flex-flow

这个属性是flex-direction和flex-wrap的集合体，用法如下

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

justify-content

这个属性是针对主轴来讲的，用来定义空间分配

flex-start（默认值）: 子元素朝向起始线填充
flex-end: 子元素朝向终止线填充
center：子元素沿主轴线居中
space-between：子元素均匀分布，第一个子元素在起始线，最后一个元素在终止线
space-around：子元素均匀分布在主轴上

align-items

这个属性是针对侧轴来说。

flex-start: 子元素对齐侧轴上沿
flex-end：子元素对齐侧轴下沿
center：子元素沿侧轴居中
baseline：子元素沿基线对齐
stretch（默认值）：拉伸填充父容器

flex-items的属性

order

默认来说，子元素按本来代码顺序布局，但我们可以利用order属性改变这个顺序。

用法： .item { order: <integer>; }

flex-grow

这个属性接受一个无单位的值定义了子元素的所占比例。

用法： .item { flex-grow: <number>; /* default 0 */ }

flex-shrink

定义了子元素的收缩比例。

用法：.item { flex-shrink: <number>; /* default 1 */ }

flex-basis

指定子元素的初始尺寸，在未经过任何flex计算时候。

用法： .item { flex-basis: <length> | auto; /* default auto */ }

可能不太好理解可以参考这个问答：What exactly flex-basis property sets?

flex

这个是flex-grow,flex-shrink,flex-basis集合体的简写，语法如下：

.item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] }

推荐这样使用而不要分别设置。

align-self

这个属性是对特定某个item设置侧轴对齐方式以用来覆盖容器的align-items属性。

实例解析

待编辑

flexbox前缀

由于这个属性较新，需要考虑兼容性的问题，这里给出sass的@mixin帮助使用

@mixin flexbox() {

  display: -webkit-box;

  display: -moz-box;

  display: -ms-flexbox;

  display: -webkit-flex;

  display: flex;

}

@mixin flex($values) {

  -webkit-box-flex: $values;

  -moz-box-flex:  $values;

  -webkit-flex:  $values;

  -ms-flex:  $values;

  flex:  $values;

}

@mixin order($val) {

  -webkit-box-ordinal-group: $val;

  -moz-box-ordinal-group: $val;

  -ms-flex-order: $val;

  -webkit-order: $val;

  order: $val;

}

.wrapper {

  @include flexbox();

}

.item {

  @include flex(1 200px);

  @include order(2);

}

浏览器支持

参考资料

本文主要引用翻译自：A Complete Guide to Flexbox