经过这段时间的学习，对于HTML+CSS的一些基础知识有了一定的了解。所谓好记性不如烂笔头，多做笔记一点点的累积，才能汇聚成知识的海洋，不懂的地方多跟同学交流或者向老师咨询。

下面我说一下CSS3中的弹性盒子：

以往的网页布局方式

方式：基于盒模型，依赖display属性+margin属性+padding属性+float属性。特殊布局比较麻烦（比如元素的垂直居中）。

2009年w3c推出flex布局，可以简便，完整，响应式的实现网页布局。任何元素都可以使用，弹性盒子是CSS3的一种新的布局模式。

一、flex是什么？

Flex：Flexible box 弹性布局（可以给盒子提供最大的灵活性）

任何容器都可以指定为flex布局

弹性盒子由弹性容器（Flex container）和弹性子元素（Flex itme）组成。

弹性容器通过设置display属性的值为flex或inline-flex将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。

二、容器属性（6个）

1、flex-direction属性：（决定主轴的方向：即项目的排列方向）

语法：box {flex-direction：row|row-reverse|column|column-reverse}

4个默认值：

row（默认值）：主轴为水平方向，起点在左端。

row-reverse：主轴为水平方向，起点在右端。

column：主轴为垂直方向，起点在上沿。

Column-reverse：主轴为垂直方向，起点在下沿。

2、flex-wrap：默认情况，项目都是排在一条线（轴线）上。而flex-wrap属性定义：如果一条线排不下，将如何换行

语法：box{flex-wrap：nowrap|wrap|wrap-reverse}

3个默认值：

nowrap（默认）：不换行。

wrap：换行，第一行在上方。

wrap-reverse：换行，第一行在下方。

3、flex-flow：是flex-direction和flex-warp属性的简写形式。默认值为：row nowrap

语法：box{flex-flow：flex-direction|flex-wrap}

4、justify-content：定义项目在主轴上的对齐方式

语法：box {justify-content：flex-start|flex-end|center|space-between|space-aroun}

5个默认值：（假设方向自左向右row只跟主轴相关）

flex-start：弹性项目向行头紧挨着填充。

flex-end：弹性项目向行尾紧挨着填充。

center：弹性项目居中紧挨着填充。

space-between：弹性项目平均分布在该行上。

space-aroun：弹性项目平均分布在该行上，两边留有一半的间隔空间。

5、align-items：定义项目在交叉轴上的对齐方式（只跟交叉轴方向相关 默认自上而下）

语法：box{align-items:flex-start|flex-end|center|baseline|stretch}

5个默认值：

flex-start：交叉轴的起点对齐。

flex-end：交叉轴的终点对齐。

center：交叉轴的中点对齐。

baseline：项目的第一行文字的基线对齐

stretch：（默认值）如果项目未设置高度或设置auto，将占满整个容器的高度。

6、Align-content：定义多根轴线的对齐方式，如果只有一根轴线该属性不起作用

语法：box{align-content：flex-start|flex-end|center|space-between|space-aroun|str

etch}

6个默认值：

flex-start：与交叉轴起点对齐。

flex-end：与交叉轴终点对齐。

center：与交叉轴中心点对齐。

space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

space-aroun：与交叉轴两侧的间隔相等，所以轴线之间的间隔是轴线与盒子边框间隔的两倍

stretch：（默认值）轴线占满整个交叉轴。