Flex 布局

Explanation

Flexible Box—弹性布局—为盒状模型提供最大的灵活性

Working Principle

flex-basis 的默认 auto 值使得尺寸计算会检索并使用 flex item 的 main size property（width或height）作为其 flex-basis 的值，如果flex元素本身的尺寸是auto（如不显式指定尺寸），则取值为元素内容的尺寸。

在空间分配初始，根据总空间 - flex-basis空间 = 剩余可分配空间来计算剩余空间。再根据 flex-grow 和 flex-shrink 对剩余空间进行分配。

现在我们可以来看一篇详细的文章：CSS-TRICKS-FLEX

Use

flex 属性可以指定1个，2个或3个值。

.box{
  display: flex;
}
.item{
	flex: auto          //  1 1 auto
	flex: 1							//	1 1 0
	flex: 1 1						//	1 1 0
	flex: 1 1 auto/30px
}

<div class="box">
	<div class="item"></div>
</div>

单值语法:

值必须为以下其中之一:

一个无单位数(number): 它会被当作 flex-grow 的值。
一个有效的宽度(auto/conten/width)值: 它会被当作 flex-basis 的值。
关键字none，auto 或 initial.

双值语法:

第一个值必须为一个无单位数，并且它会被当作 flex-grow 的值。第二个值必须为以下之一：

一个无单位数：它会被当作 flex-shrink 的值。
一个有效的宽度值: 它会被当作 flex-basis 的值。

三值语法:

第一个值必须为一个无单位数，并且它会被当作 flex-grow 的值。
第二个值必须为一个无单位数，并且它会被当作 flex-shrink 的值。
第三个值必须为一个有效的宽度值，并且它会被当作 flex-basis 的值。

注意(重点—易被忽略)

当使用一个或两个无单位数时, flex-basis会从auto变为0.

value

initial

元素会根据自身宽高设置尺寸。它会缩短自身以适应 flex 容器，但不会伸长并吸收 flex 容器中的额外自由空间来适应 flex 容器。
相当于将属性设置为”flex: 0 1 auto”。

auto

元素会根据自身的宽度与高度来确定尺寸，但是会伸长并吸收 flex 容器中额外的自由空间，也会缩短自身来适应 flex 容器。
相当于将属性设置为 “flex: 1 1 auto”.

none

元素会根据自身宽高来设置尺寸。它是完全非弹性的：既不会缩短，也不会伸长来适应 flex 容器。
相当于将属性设置为”flex: 0 0 auto”。

flex-grow

定义 flex 元素的放大比例，默认为0，即如果存在剩余空间，也不放大。负值无效。

flex-shrink

定义 flex 元素的缩小比例，默认为1，即如果空间不足，该项目将缩小。负值无效。

flex-basis

定义 flex 元素在分配多余空间之前，项目占据的主轴空间(main size)。默认值为 auto，即项目的本来大小。浏览器根据这个属性，计算主轴是否有多余空间。
如果有多余空间则会按照 flex-grow 的比例进行放大填充。如果没有多余空间则会按照 flex-shrink 的比例进行压缩。

优先于width，但是受min-width/max-width控制。(https://www.jianshu.com/p/17b1b445ecd4)

flex-wrap

默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

.box{
  flex-wrap: nowrap(Default value) | wrap | wrap-reverse(换，不过第一行在下方);
}

flex-diretion

决定主轴的方向（即项目的排列方向）

.box {
  flex-direction: row(Default value) | row-reverse | column | column-reverse;
}

flex-flow

flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap

.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

Computed Example

.nav-bar{
	display: flex
	line-height: 44px;
  text-align: center;
  box-shadow: 0 1px 1px rgba(100,100,100,.1);    
}
.center{
  background-color: #ff8198;
  flex: 2          //  2 1 0%
}
.left,.right{
  background-color: aquamarine;
  flex: 1 80px     //  1 1 80px
}

总宽度	375px

已占据宽度 ( flex-basis )	left + right + center = 80 + 80 + 0 = 160 px
剩余宽度	375 - 160 = 215 px
各占比例	left = right = 1 center = 2 ( flex-grow )

剩余宽度处理 ( 分赃 )	all: 4 份 — — 一份：215 / 4 = 53.75
终极宽度	left/right：80 + 53.75 * 1 = 133.75 center = 0 + 53.75 * 2 = 107.5

others

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html