弹性布局(Flexbox)

背景

弹性布局模型(Flexible Box)旨在提供一种非常高效的布局方式,对齐和分配容器中各个子元素的空间,甚至于他们的尺寸是未知的或者动态的。(因此叫弹性布局)。 弹性布局的主要方法是赋予容器能够识别子元素的宽度或者高度的能力来完美的填充可利用的空间(最大的适用所有种类的设备尺寸)。弹性布局的容器可以扩张子元素来填充多余的空间,也可以缩放元素避免其溢出。 弹性布局区别于通常布局(块级元素是基于竖向排列的,行内元素是基于横向排列的)的最重要的一点是在排列的方向上(横向/竖向)是未知的。尽管通常的布局可以很好的工作于页面中,但它在支持大屏幕或者复杂的应用程序中缺少灵活性。特别是当屏幕方向翻转,页面大小发生变化,拉伸,压缩等如此状况的时候。

基础和术语

既然弹性布局是一一个模块而非单个属性,自然会包含很多的属性。其中有些是设置在容器上(父容器,即"flex container"),有些是设置在孩子节点上(即"flex item"),如以下详细示意图。
flex-image
通常情况下,元素的布局是参照主轴(main axis,布局按照从main-start到main-end)或者是交叉轴(cross axis,布局按照从cross-start到cross-end).

父容器的属性(flex container)

#display

这个属性定义了一个flex布局的容器;属于行内元素还是块级元素取决了指定的值。它为所有的的直属孩子节点创建了一个flex的上下文。

.container {
  display: flex; /* or inline-flex */
}

#flex-direction

这个属性建立了主轴线,因而定义了元素在flex容器中的摆放方向。Flexbox是一种单方向的布局。所以可以想象到flex布局的元素排列要么是横向的,要么是竖向的。
                    
.container {
  flex-direction: row | row-reverse | column |column-reverse
}
  • row(默认): 从左到右从(默认文本排列是ltr);从右到左(默认文本排列是rtl)
  • row-reverse:与row属性方向相反
  • column: 和row属性类似,但是从上到下
  • column-reverse:和row-reverse类似,但是从下到上

#flex-wrap

默认情况下,flex的元素试图显示在一行中。你可以通过本属性允许元素在需要的情况下自动换行。
                    
.container {
  flex-wrap: nowrap | wrap | wrap-reverse 
}
  • nowrap(默认):所有元素都会显示在一行。
  • wrap:flex元素将会换行,从上到下。
  • wrap-reverse:flex元素将换行从下到上
具体参考下列示意图:
flex-wrap: nowrap
1
2
3
4
5
6
7
8
flex-wrap: wrap
1
2
3
4
5
6
7
8
flex-wrap: wrap-reverse
1
2
3
4
5
6
7
8

#flex-flow

这是flex-direction和flex-wrap属性的缩写形式,定义了flex容器的主轴和交叉轴。默认值为:row nowrap。

flex-flow: <'flex-direction'> || <'flex-wrap'> 

#justify-content

本属性定义了元素在主轴上的对齐方式。当所有处在同一行的元素不够灵活时或者排列自适应但已经达到最大的尺寸的时候,本属性可以帮助分配多余的空间。如果元素溢出本行,也可以控制其对齐方式。
                    
.container {
  justify-content: flex-start | flex-end | center 
      | space-between | space-around
}
  • flex-start(默认):元素向行开始的方向对齐
  • flex-end:元素向行结束的方向对齐
  • center:元素相对于行居中对齐
  • space-between:元素均匀的排放于一行中;第一个位于行首,最后一个位于行尾
  • Space-around:元素之间具有相同的空间。注意:外表上来看各个空间是有差异的,因为所有的元素两边都有相同的空间。第一个元素将会有一个单位的空间相对于容器的边缘,但下一个元素将会有两个单位的空间因为下一个必须将自身的空间计算在内。

#align-items

本属性定义了flex元素怎样在交叉轴上排列的默认行为。和justtify-content属性相互类似。
                    
.container {
  align-items: flex-start | flex-end | center | baseline | stretch
}
  • flex-start:元素向交叉轴的开始方向对齐
  • flex-end:元素向交叉轴的结束方向对齐
  • center:元素在交叉轴上居中对齐
  • baseline:元素对齐类似于基线对齐
  • stretch(默认):拉伸以是填充容器(仍然限制于min-width/max-width属性)

#align-content

本属性用来对齐flex容器的多个行当在交叉轴上有额外的空间的时候, 类似于在主轴上justtify-content的作用。 注意: 这个属性在只有一行元素的情况下没有效果。
                    
.container {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch
}
  • flex-start: 所有行位于容器的开始部位
  • flex-end: 所有行位于容器的结束部位
  • center:所有行位于整个容器中间
  • space-between:行均匀的分布;第一行位于容器开始位置,最后一行位于容器结束位置
  • space-around:行均匀的分布,并且间隔的相同的空间。
  • stretch(默认):行相应的扩展填充整个容器

孩子节点属性(flex items)

#order

默认情况下,flex的元素按照源码中html的顺序排列。然后,order属性可以控制元素在容器中的排列。
                    
.item {
  order: <integer>
}

#flex-grow

这个属性赋予flex元素在需要的时候具有增长(拉伸)的能力。它可以指定元素在容器中可以占据的有效空间所对应的数值。 如果所有元素的flex-grow都被设置为1,则剩余空间将会被平分。如果其中一个被设置为2,该元素将拥有两倍于其他元素的剩余空间。
                .item{
    flex-grow: <number>/*default 0*/
}
注意:负值是无效的。

#flex-shrink

本属性赋予了元素在需要的时候可以被压缩的能力。

.item {
    flex-shrink: <number>/*default 1*/
}
注意:负值是无效的。

#flex-basis

这个属性定义了元素在没有分配剩余空间之前的默认的尺寸。可以设置一个长度(e.g.20%, 5rem, etc.)或者一个关键字.

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

#flex

这个属性flex-grow,flex-shrink和flex-basis的缩写简写形式。第二和第三个属性是可选的。默认值为0 1 auto。

.item {
    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
建议使用本缩写属性而不是分别设置各个属性。

#align-self

这个属性允许当前元素的默认对齐方式被本属性值所覆盖。

.item {
    flex: auto | flex-start | flex-end | center | baseline | stretch;
}

flexbox前缀

Flexbox 需要通过一些前缀来支持多浏览器。当然并不是仅仅简单的添加前缀,有一些属性名称和值是完全不同的。这是因为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);
 }
原文地址:https://css-tricks.com/snippets/css/a-guide-to-flexbox
  1. 寻寻觅觅 -- Christine Welch
  2. Just the Way You Are -- Bruno Mars
  3. Despacito(Remix) -- Luis Fonsi;Daddy Yankee;Justin Bieber
  4. 没有什么不同 -- 曲婉婷
  5. 故乡--许巍
  6. Jar Of Love -- 曲婉婷
  7. I Really Like You -- Carly Rae Jepsen