今天完成的事情：完成了任务七

明天计划的事情：开始任务八

收获：

请解释一下CSS3的Flexbox（弹性盒布局模型）以及适用场景？

一、

①flex是flexible box的缩写，意为“弹性布局”，用于简洁、完整、响应式地实现各种页面布局，给盒模型提供最大的灵活性。直接设置display:flex或者display:inline-flex的元素称为flex容器(flex container)，里面的子元素称为flex子项(flex item)。容器默认存在两根轴，水平的主轴(main axis)和交叉轴(cross axis)，flex项目默认沿主轴排列。

②flex布局的相关属性分为两拨，一拨作用于flex容器，一拨作用于flex子项

作用于flex容器的属性有：flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content

作用于flex子项的属性有：order、flex-grow、flex-shrink、flex-basis、flex、align-self

二、作用于flex容器的属性

①flex-direction

flex-direction用来控制子项整体布局方向，是从左往右还是从右往左，是从上往下还是从下往上。

语法如下：flex-direction: row | row-reverse | column | column-reverse；

row 默认值，显示为行。方向为当前文档水平流方向，默认是从左到右。如果设置direction:rtl，则从右到左

row-reverse 显示为行，方向和row相反

column 显示为列，从上到下

column-reverse 显示为列，方向和column属性值相反

②flex-wrap

flex-wrap用来控制子项整体单行显示还是换行显示，如果换行，则下面一行是否反方向显示。

语法如下：flex-wrap: nowrap | wrap | wrap-reverse；

nowrap 默认值，表示单行显示，不换行

wrap 宽度不足换行显示

wrap-reverse 宽度不足换行显示，但是是从下向上

③flex-flow

flex-flow属性是flex-direction和flex-wrap的缩写，语法如下：flex-flow: <‘flex-direction’> || <‘flex-wrap’>

举个栗子 flex-flow: row-reverse wrap-reverse；

④justify-content

justify-content属性决定了水平方向子项的对齐分布方式

语法如下：justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly；

flex-start 默认值，和文档流方向相关，默认表现为左对齐

flex-end 和文档流方向相关，默认表现为右对齐

center 居中对齐

space-between 两端对齐，各个子项间距等宽

space-around 每个flex子项两侧都环绕着等宽的空白间距，视觉上为边缘两侧的空白为中间空白宽度的一半

space-evenly 每个flex子项两侧空白间距完全相等

⑤align-items

align-items指的是flex子项们相对于flex容器在垂直方向上的对齐方式，是顶部对齐，底部对齐，还是拉伸对齐

语法如下：align-items: stretch | flex-start | flex-end | center | baseline；

stretch 默认值，flex子项拉伸

flex-start 默认表现为容器顶部对齐

flex-end 默认表现为容器底部对齐

center 表现为垂直居中对齐

baseline 表现为所有flex子项对相对于flex容器的基线对齐

⑥align-contet

align-content和justift-content相似，一个指水平方向，一个指垂直方向。align-content即是指明垂直方向每一行flex元素的对齐和分布方式。如果所有flex子项只有一行，则align-content属性是没有任何效果的。

语法如下：align-content: stretch | flex-start | flex-end | center | space-between | space-around | space-evenly；

stretch 默认值。每一行flex子元素都等比例拉伸。例如，如果共两行flex子元素，则每一行拉伸高度是50%

flex-start 默认表现为顶部堆砌

flex-end 默认表现为底部堆放

center 表现为整体垂直居中对齐

space-between 表现为上下两行两端对齐。剩下每一行元素等分剩余空间

space-around 每一行元素上下都享有独立不重叠的空白空间

space-evenly 每一行元素都完全上下等

三、作用在flex子项上的属性

①order

我们可以设置order来改变某一个flex子项的排序位置，所有flex子项的默认order属性值是0，因此，如果我们想要某一个flex子项在最前面显示，可以设置比0小的整数，如-1就可以了。

语法：order: <integer>; integer为整数，可以是负数，默认为0

②flex-grow

flex-grow属性中的grow是扩展的意思，扩展的是flex子项所占据的宽度，扩展侵占的空间就是容器内除了元素之外的空白区域。

语法如下：flex-grow: <number>;  可以为小数，默认值为0

flex-grow默认值为0，表示不占用剩余的空白间隙扩展自己的宽度，不支持负数。如果flex-grow大于0，则剩余空间的分配就会发生，规则如下

1.所有剩余空间的总量为1

2.如果只有一个子项设置了flex-grow属性值，且小于1，如0.3，则扩占剩余空间的30%。如果大于等于1，则独享所有剩余空间

3.如果有多个子项设置了flex-grow属性值，且总和小于1，如0.2  0.3，则分别扩占20%和30%。如果总和大于1，则所有剩余空间被占用，分配比例为属性值的比例。如0.2  0.6   0.8，则分别扩占12.5%  37.5%  50%

③flex-shrink

shrink是收缩的意思，flex-shrink主要处理当flex容器空间不足时，单个元素的收缩比例。flex-shrink不支持负值，默认值为1，也就是默认所有子项都会收缩。如果设置为0，则表示不收缩，保持原始的宽度

语法如下：flex-shrink: <number>; 可以为小数，默认为1

规则如下：

1.如果只有一个flex子项设置了flex-shrink：

flex-shrink值小于1，则收缩的尺寸不完全，会有一部分内容溢出flex容器。

flex-shrink值大于等于1，则收缩完全，正好填满flex容器。

2.如果多个flex子项设置了flex-shrink：

flex-shrink值的总和小于1，则收缩的尺寸不完全，每个元素收缩尺寸占“完全收缩的尺寸”的比例就是设置的flex-shrink的值。

flex-shrink值的总和大于1，则收缩完全，每个元素收缩尺寸的比例和flex-shrink值的比例一样。

④flex-basis

flex-basis定义了在分配剩余空间之前元素的默认大小

语法如下：flex-basis: <length> | auto; 默认为auto

默认为auto，就是自动，设置了width则占据空间就是width

⑤flex

flex属性是flex-grow , flex-shrink , flex-basis的缩写

语法如下：flex: none | auto | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

第二个参数和第三个参数是可选的。默认值为0 1 auto，即不扩占，不收缩，占据默认空间

常见的flex：1；即flex-grow值为1，元素扩占相同的空间

flex默认值等同于flex:0 1 auto；

flex:none等同于flex:0 0 auto；

flex:auto等同于flex:1 1 auto；

⑥align-self

align-self指控制某一个单独flex子项的垂直对齐方式，区别不大，语法几乎一样

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

唯一区别是多了一个auto（默认值），表示继承flex容器的align-items属性值