Flexbox布局学习笔记

W3C解释：

In the flex layout model, the children of a flex container can be laid out in any direction, and can "flex" their sizes, either growing to fill unused space or shriking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.

flexbox的出新是为了解决复杂的web布局，因为这种布局方式很灵活。容器的子元素可以任意方向进行排列。

Flexbox模型和术语：

flex布局模型不同于块和内联模型布局（计算依赖于块和内联的流方向），flex布局依赖于flex directions。即：Flexbox是布局模块，而不是一个简单的属性，它包含父元素（flex container）和子元素（flex items）的属性。

Flex Flexbox

main axis | main dimension 主轴、主轴方向

cross axis | cross dimension 侧轴、侧轴方向

flex container 弹性容器：包含着弹性项目的父元素，通过设置display属性为flex或inline-flex来定义弹性容器

flex item弹性项目：弹性容器的每个子元素都称为弹性项目。弹性容器直接包含的文本将被包覆成匿名弹性单元。

Flexbox使用示例：

水平竖直居中：

<div class="parent"><div class="child"></div></div>

将 .parent 的 display 属性设置为 flex，将 .child 的 margin 设置为 auto。

在Flex容器中，当项目边距设置为 auto 时，设置自动的垂直边距使该项目完全居中两个轴。

Flexbox属性：

1. dispaly（flex container）

display: other values | flex | inline-flex;

2. flex-direction（flex container）

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

主要用来创建主轴，从而定义伸缩项目放置在伸缩容器的方向。

Flex-direction

3. order（flex items）

默认情况下，伸缩项目是按照文档流出现先后顺序排列。而"order"属性可以控制伸缩项目在其伸缩容器中出现的顺序。

order: <integer>

4.flex-wrap（flex container）

主要用来定义伸缩容器里是单行还是多行显示，侧轴的方向决定了新行堆放的方向。

flex-wrap: nowrap | wrap | wrap-reverse

nowrap（默认值）：伸缩容器单行显示。

wrap：伸缩容器多行显示。

wrap-reverse：伸缩容器多行显示，方向与wrap相反。

5.flex-flow（flex container）

flex-direction 和 flex-wrap 属性的缩写版本。

6.justify-content（flex container）：

定义伸缩项目沿着主轴线的对齐方式。当一行上的所有伸缩项目都不能伸缩，或者可伸缩但是已经达到最大长度时，这一属性才会对多余的空间进行分配。当项目溢出某一行时，该属性也会在项目的对齐上施加一些控制。

justify-content: flex-start | flex-end | center | space-between | space-around;

justify-content

7. align-content（flex container）

用来调准伸缩行在伸缩容器里的对齐方式。

align-content: flex-start | flex-end | center | space-between | space-around | strench;

align-content

8. align-items（flex container）

align-items: flex-start | flex-end | center | baseline | stretch；

align-items

9. align-self（flex items）

用来在单独的伸缩项目上覆写默认的对齐方式。

align-self: auto | flex-start| flex-end| center | baseline | stretch;

align-self

10. flex-grow（flex items）

根据需要来定义伸缩项目的扩展能力。接受一个不带单位的值作为一个比例。

主要用来决定伸缩容器剩余空间按比例应该扩展多少空间。

flex-grow: <number>;  /* 默认为0 */

如果所有伸缩项目该属性设置了1，那么每个项目就设置为一个大小相等的剩余空间；如果给其中一个伸缩项目设置为2，那么这个项目所占的剩余空间是其他项目所占剩余空间的2倍。

flex-grow

11. flex-shrink（flex items）

根据需要来定义伸缩项目收缩的能力。

12. flex-basis（flex items）

用来设置伸缩基准值，剩余的空间按比例进行伸缩。

13. flex（flex items）

flex-grow、flex-shrink 和 flex-basis 3个属性的缩写。