FlexBox 弹性盒模型布局 - 父控件篇

弹性布局(flexble box)模块指在提供一个更加有效的方式来布置，对齐和分部在容器之间的各项内容，即使它们的大小是未知或者动态变化的。它的主要思想是让容器有能力来改变项目的宽度和高度，以填满可用空间(主要是为了容纳所有类型的显示设备和屏幕尺寸)的能力。

Flexbox是一个整体模块，而不是单一的一个属性，它涉及到了很多东西，包括它的整个属性集，所有它需要在父容器设置也有的需要在子控件设置。

flexbox.png

基本上 伸缩项目是沿着主轴(main axis),从主轴起点(main start)到主轴终点(main end)或者沿着侧轴(cross axis),从侧轴起点(cross-start)到侧轴终点(cross-end)排列

• 主轴(main axis)：伸缩容器的主轴，伸缩项目主要沿着这条轴进行排列布局。它的(水平或者垂直)方向取决于"justify-start"属性
• 主轴起点(main start)和主轴终点(main end)：伸缩项目防止在伸缩容器内从主轴起点向主轴终点的方向
• 主轴尺寸(mian size): 伸缩项目在主轴方向的宽度或者高度就是主轴的尺寸。伸缩项目主要的大小属性主要是宽度，高度，主要取决于那一个对着主轴方向决定
• 侧轴(cross axis):垂直于主轴成为侧轴。它的方向主要取决于主轴方向。
• 侧轴起点(cross start)和侧轴终点(cross end): 伸缩行的配置从容器的侧轴起点边开始到终点边结束
• 侧轴尺寸(cross size):伸缩项目在侧轴方向的宽度或者高度就是项目的侧轴长度，伸缩项目的侧轴属性由哪一个对着侧轴方向决定

属性介绍

display: flex | inline-flex (适用于父类容器元素上)

定义：一个flex容器，内联或者根据指定的值，来作用于下面的子类容器。

• box 将对象作为弹性伸缩显示
• inline-box 讲对象作为内联块级弹性伸缩盒显示
• flexbox 讲对象作为弹性伸缩盒显示
• inline-flexbox讲对象作为内联块级弹性伸缩盒显示
• flex 讲对象作为弹性伸缩盒显示 （目前使用的）
• inline-flex讲对象作为内联块级伸缩盒显示《目前使用的）

1.css 列（CSS columns）在弹性盒子中不起作用
2.float, clear and vertical-align 在flex项目中不起作用

flex-direction (适用于父类容器的元素上)

定义：设置或检索伸缩盒对象的子元素在父容器中的位置。
flex-direction: row | row-reverse | column | column-reverse

• row 横向从左向右排队 默认
• row-reverse 反转横向排列
• column 纵向排列
• column-reverse 反转纵向排列 从后向前排列 最后一项拍在最前面

Flex-Direction Demo

flex-wrap (适用于父类容器上)

定义:设置或检索伸缩盒对象的子元素超出父容器时是否换行
flex-wrap: nowrap | wrap | wrap-reverse

• nowrap 当子元素溢出父容器时不换行
• wrap 当子元素溢出父容器时自动换行
• wrap-reverse 反转wrap排列

Flex-Wrap Demo

flex-flow (适用于父类容器上)

定义：复合属性。设置或检索伸缩盒对象的子元素排列方式。
flex-flow: <‘flex-direction’> || <‘flex-wrap’>

• [flex-driection] 定义弹性盒子元素的排列方向
• [flex-wrap] 定义弹性盒子元素溢出父容器时是否换行

Flex-Flow Demo

justify-content (适用于父类容器上)

定义： 设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。当弹性盒里一行上的所有子元素都不能伸缩或已经达到其最大值时,这一属性可协助对多余的控件经行分配。 当元元素溢出某行时,这一属性同样会在对齐上进行控制

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

• flex-start 弹性盒子元素讲向行起始位置对齐。该行的第一个子元素的主起始位置的边界与该行的主起始位置的边界对齐
  同时所有后续的伸缩项目于前一个项目对齐

• felx-end 弹性盒子元素将向行结束位置对齐。该行的子元素讲相互对齐并在行中居中对齐,同时第一个元素与行的主起始位置的边距等同于最后一个元素与行的主结束位置的边距

• center：弹性盒子元素将向行中间位置对齐。该行的子元素将相互对齐并在行中居中对齐，同时第一个元素与行的主起始位置的边距等同与最后一个元素与行的主结束位置的边距（如果剩余空间是负数，则保持两端相等长度的溢出）

• space-between：弹性盒子元素会平均地分布在行里。如果最左边的剩余空间是负数，或该行只有一个子元素，则该值等效于'flex-start'。在其它情况下，第一个元素的边界与行的主起始位置的边界对齐，同时最后一个元素的边界与行的主结束位置的边距对齐，而剩余的伸缩盒项目则平均分布，并确保两两之间的空白空间相等。

• space-around：弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半。如果最左边的剩余空间是负数，或该行只有一个伸缩盒项目，则该值等效于'center'。在其它情况下，伸缩盒项目则平均分布，并确保两两之间的空白空间相等，同时第一个元素前的空间以及最后一个元素后的空间为其他空白空间的一半。

Justify-ContentDemo

align-items (适用于父类容器上)

定义：设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
align-items: flex-start | flex-end | center | baseline | stretch

• flex-start 弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠该行的侧轴(纵轴)起始边界

• flex-end 弹性盒子元素的侧轴 结束为止的边界紧靠住父容器的侧轴结束边界

• center:弹性盒子元素在该行的侧轴上居中位置(如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。

• baseline:如弹性盒子元素的行内轴与侧轴为同一条,则该值与"flex-start"等效。其他情况下该值讲参与基线对齐

• stretch:如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。

  Align-Items Demo

align-content (适用于父类容器上)

定义：设置或检索弹性盒堆叠伸缩行的对齐方式
align-content: flex-start | flex-end | center | space-between | space-around | stretch

• flex-start：各行向弹性盒容器的起始位置堆叠。 弹性盒容器中第一行的侧轴起始边界紧靠住该弹性盒容器的侧轴起始边界，之后的每一行都紧靠住前面一行。

• flex-end：各行向弹性盒容器的结束位置堆叠。 弹性盒容器中最后一行的侧轴起结束界紧靠住该弹性盒容器的侧轴结束边界，之后的每一行都紧靠住前面一行。

• center：各行向弹性盒容器的中间位置堆叠。各行两两紧靠住同时在弹性盒容器中居中对齐， 保持弹性盒容器的侧轴起始内容边界和第一行之间的距离与该容器的侧轴结束内容边界与第最后一行之间的距离相等。

• space-around：各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。 如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于'center'。在其它情况下，各行会按一定方式在弹性盒容器中排列，以保持两两之间的空间相等， 同时第一行前面及最后一行后面的空间是其他空间的一半。

• stretch：各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于'flex-start'。在其它情况下，剩余空间被所有行平分，以扩大它们的侧轴尺寸

Align-Content Demo

参考文章:
flexbox-CSS3弹性盒模型flexbox布局完整版教程