css3--弹性盒模型

一、弹性盒布局解释—Flexbox布局

弹性盒布局方式，更好的控制项目的对齐和自由分配容器空间，即使它们的大小是未知的或动态 的。因此得其名"flex"，弹性盒的盒子叫作“flex的容器”，放在弹性盒里子元素叫作“flex项目”

二、Flex布局的主要思想

给容器控制项目（Flex项目）的宽度、高度的能力，使Flex项目可以自动填满容器的可用空间 （主要是适应所有类型的显示设备和屏幕大小）。Flex容器使Flex项目可以自动放大与收缩，用来填 补可用的空闲空间。

注：
Flexbox布局比较适合Web应用程序的一些小组件和小规模的布局，而Grid布局（网格单元 格布局）更适合用于一些大规模的布局

三、Flex容器属性

1. display：

定义一个Flex容器，根据其取的值来决定是内联还是块。Flex容器会为其内容建立新的伸 缩格式化上下文。

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

2、flex-direction：

定义Flex容器里的项目的放置的方向。水平或者垂直

.container { flex-direction: row | row-reverse | column | column-reverse; }

3、flex-wrap：

显示在一行还是多行

.container { flex-wrap: nowrap | wrap | wrap-reverse; }

4、flex-flow(适用于flex容器元素)：

这是flex-direction和flex-wrap两个属性的缩写。两个属性决定了伸缩容器的主轴与侧轴。 默认值是row nowrap（中间用空格隔开）。

5、justify-content：

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

 flex-start | flex-end | center | space-between | space-around

6、align-items：

定义flex项目 在 flex容器 的当前行的侧轴（纵轴）方向上的对齐方式。 伸缩项目可以在伸缩容器的当前行的侧轴上进行对齐，这类似于justify-content属性，但是是 另一个方向。align-items可以用来设置伸缩容器中包括匿名伸缩项目的所有项目的对齐方式。

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

7、align-content：

当伸缩容器的侧轴还有多余空间时，align-content属性可以用来调准伸缩行在伸缩容器里的对齐 方式，这与调准伸缩项目在主轴上对齐方式的justify-content属性类似。
请注意本属性在只有一 行的伸缩容器上没有效果

flex-start |flex-end|center|space-between|space-around | stretch

四、Flex项目属性

1、order：

用整数值来定义排列顺序，数值小的排在前面。可以为负值

默认情况，Flex项目是按文档源的流顺序排列。然而，在Flex容器中可以通过order属性来控制 Flex项目的顺序源。设置或检索弹性盒模型对象的子元素出現的顺序。
order定义将会影响 <’ position '> 值为static元素的层叠级别，数值小的会被数值大的盖住。

2、flex-grow：number

该属性控制flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。
如果 所有Flex项目的flex-grow设置为1时，表示Flex容器中的Flex项目具有相等的尺寸。 如果你给其中一个Flex项目设置flex-grow的值为2，那么这个Flex项目的尺寸将是其 他Flex项目两倍（其他Flex项目的flex-grow值为1）。注意：flex-grow取负值将失 效。

3、flex-shrink：number

设置或检索弹性盒的收缩比率。根据弹性盒子元素所设置的收缩因子作为比率来收缩空间。

4、flex-basis:

设置或检索弹性盒伸缩基准值。如果所有子元素的基准值之和大于剩余空间，则会根据每项设置的基准 值，按比率伸缩剩余空间.。
如果设置为0，内容不在考虑周围额外空间。如果设置为auto，额外空间会基于flex-grow值做分布。

5、flex：

复合属性。设置或检索弹性盒模型对象的子元素如何分配空间。
flex是flex-grow，flex-shrink和flex-basis三个属性的缩写。
第二个和第三个参数(flex-shrink和 flex-basis)是可选值。其默认值是0 1 auto。
如果缩写「flex: 1」, 则其计算值为「1 1 0%」
如果缩写「flex: auto」, 则其计算值为「1 1 auto」
如果「flex: none」, 则其计算值为「0 0 auto」
如果「flex: 0 auto」或者「flex: initial」, 则其计算值为「0 1 auto」，即「flex」初始值

6、align-self：

定义flex子项单独在侧轴（纵轴）方向上的对齐方式
注意：float，clear和vertical-align属性在Flex项目中无效