理解Flexbox弹性盒子

http://www.w3cplus.com/css3/understanding-flexbox-everything-you-need-to-know.html参考文档

1：要开始使用Flexbox，必须先让父元素变成一个Flex容器。

你可以在父元素中显式的设置

display:flex

或者

display:inline-flex

。就这么的简单，这样你就可以开始使用Flexbox模块。

2.Flex容器属性

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

flex-direction: row || column || row-reverse || column-reverse;

flex-wrap: wrap || nowrap || wrap-reverse;

flex-flow:

flex-flow

是

flex-direction

和

flex-wrap

两个属性的速记属性

你还记得使用

border

的速记写法？

border: 1px solid red

。这里的概念是相同的，多个值写在同一行，比如下面的示例：

ul { flex-flow: row wrap; }

justify-content

属性可以接受下面五个值之一：

ul {
justify-content: flex-start || flex-end || center || space-between || space-around }

align-items

属性类似于

justify-content

属性。只有理解了

justify-content

属性，才能更好的理解这个属性。

align-items

属性可以接受这些属性值：

flex-start || flex-end || center || stretch || baseline

。

ul { align-items: flex-start || flex-end || center || stretch || baseline }

它主要用来控制Flex项目在Cross-Axis对齐方式。这也是

align-items

和

justify-content

两个属性之间的不同之处。

align-content

还记得前面讨论的

wrap

属性吗？我们在Flex容器中添加了更多的Flex项目。让Flex容器中的Flex项目多行排列。

align-content

属性用于多行的Flex容器。它也是用来控制Flex项目在Flex容器里的排列方式，排列效果和

align-items

值一样，但除了

baseline

属性值。

像

align-items

属性一样，它的默认值是

stretch

。你现在应该熟悉这些值。那它又是如何影响Flex容器里的10个Flex项目多行排列方式。

3.Flex项目属性

order || flex-grow || flex-shrink || flex-basis

flex-basis

记得前面我说过，Flex项目是当我没有的。但我们也可以控制。

flex-basis

属性可以指定Flex项目的初始大小。也就是

flex-grow

和

flex-shrink

属性调整它的大小以适应Flex容器之前。

前面介绍的是非常生要的，所以我们需要花一点时间来加强对他们的理解。

flex-basis

默认的值是

auto

。

flex-basis

可以取任何用于

width

属性的任何值。比如

% || em || rem || px

等。

注意：如果

flex-basis

属性的值是

时，也需要使用单位。即

flex-basis: 0px

不能写成

flex-basis:0

。

默认情况，Flex项目的初始宽度由

flex-basis

的默认值决定，即：

flex-basis: auto

。Flex项目宽度的计算是基于内容的多少来自动计算（很明显，加上了

padding

值）。

flex速记

flex

是

flex-grow

、

flex-shrink

和

flex-basis

三个属性的速记（简写）。

注意它们之间的顺序。

flex-grow

第一，然后是

flex-shrink

，最后是

flex-basis

。缩写成 GSB，可以帮助你更好的记忆。

如果

flex

属性值中少一个值，会发生什么呢？

如果你只设置了

flex-grow

和

flex-shrink

值，

flex-basis

可能是默认值

。这就是所谓的绝对flex项目。只有当你设置了

flex-basis

，你会得到一个相对flex项目。

flex: 0 1 auto

li { flex: 0 1 auto; }

这相当于写了

flex

默认属性值以及所有的Flex项目都是默认行为。

flex: 0 0 auto

li { flex: 0 0 auto; }

这个相当于

flex: none

。

还是老规矩：宽度是被自动计算，不过弹性项目不会伸展或者收缩（因为二者都被设置为零）。伸展和收缩开关都被关掉了。

它基本上是一个固定宽度的元素，其初始宽度是基于弹性项目中内容大小。

flex: 1 1 auto

这与

flex: auto

项目相同。

还是按我前面立的规矩。即，自动计算初始化宽度，但是如果有必要，会伸展或者收缩以适应整个可用宽度。

伸展和收缩开关打开了，宽度自动被计算。

flex: "positive number"

这里正数可以代表任何正数（没有引号）。这与

flex: “正数” 1 0

相同。

flex: 2 1 0

与写为

flex: 2

是一样的，

表示任何正数。

li { flex: 2 1 0; / *与 flex: 2相同 */ }

与前面我立的规矩一样，即，将弹性项目的初始宽度设置为零（嗯？没有宽度？），伸展项目以填满可用空间，并且最后只要有可能就收缩项目。

弹性项目没有宽度，那么宽度该如何计算呢？

这个时候

flex-grow

值就起作用了，它决定弹性项目变宽的程度。由它来负责没有宽度的问题。

当有多个弹性项目，并且其初始宽度

flex-basis

被设置为基于零的任何值时，比如

0px

，使用这种

flex

简写更实用。

实际发生的是，弹性项目的宽度被根据

flex-grow

值的比例来计算。

记住设置

flex-grow : 1

，会让弹性项目填满可用空间。伸展开关打开了。

这里有两个弹性项目。一个的

flex-grow

属性值是

，另一个是

，那么会出现啥情况呢？

两个项目上的伸展开关都打开了。不过，伸展度是不同的，

和

。

二者都会填满可用空间，不过是按比例的。

它是这样工作的：前一个占

1/3

的可用空间，后一个占

2/3

的可用空间。

绝对和相对Flex项目

一个相对Flex项目内的间距是根据它的内容大小来计算的。而在绝对Flex项目中，只根据

flex

属性来计算，而不是内容。

绝对Flex项目的宽度只基于

flex

属性，而相对Flex项目的宽度基于内容大小。

align-self

align-self

属性更进一步让我们更好地控制弹性项目。

你已经看到

align-items

属性是如何有助于整体对齐弹性容器内的所有弹性项目了。

如果想改变一个弹性项目沿着侧轴的位置，而不影响相邻的弹性项目，该怎么办呢？

这是

align-self

属性大展拳脚的地方了。

该属性的取值可以是这些值之一：

auto || flex-start || flex-end || center || baseline || stretch

。

Auto-margin 对齐

当在Flex项目上使用

margin: auto

时，值为

auto

的方向（左、右或者二者都是）会占据所有剩余空间。

解决嵌套中的flex容器的占用空间比例问题

一定有办法让所有这些放在一行，每个段落占据该行相等空间。用Flexbox来搞定！这里的概念与很多栅格系统中用的一样。

li { display: flex; /*段落现在显示在一行上*/ padding: 0 20px; /*留点呼吸空间*/ min-height: 50px; } li p { flex: 0 0 25%; /*这是甜面酱*/ }

看到段落会发生什么了吗？

flex: 0 0 25%;

“不要伸展或者收缩，不过每个段落应该占据

25%

的可用空间” 。段落所占空间是相等的。