本周是移动web的一些学习，我想想我觉得值得重点复习的地方
flex弹性布局
学过浮动布局和定位之后，再学习到弹性布局，简直就像原始社会的猿猴直接来到互联网世界，我大为震撼。什么？ 一行排列 平均间隔，一秒就好啦？(○´･д･)ﾉ 不要太嗲哦
这也太好用了吧。下面是我收藏的学习笔记。
1. 基本概念
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称“项目”。容器默认存在两根轴，分别为水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置叫做 main start，结束位置叫做 main end；交叉轴的开始位置叫做 cross start，结束位置叫做 cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size，占据的交叉轴空间叫做 cross size。如下图所示：
CSS 中提供了以下属性来实现 Flex 布局：
| 属性 | 描述 |
|---|---|
| display | 指定 HTML 元素的盒子类型 |
| flex-direction | 指定弹性盒子中子元素的排列方式 |
| flex-wrap | 设置当弹性盒子的子元素超出父容器时是否换行 |
| flex-flow | flex-direction 和 flex-wrap 两个属性的简写 |
| justify-content | 设置弹性盒子中元素在主轴（横轴）方向上的对齐方式 |
| align-items | 设置弹性盒子中元素在侧轴（纵轴）方向上的对齐方式 |
| align-content | 修改 flex-wrap 属性的行为，类似 align-items，但不是设置子元素对齐，而是设置行对齐 |
| order | 设置弹性盒子中子元素的排列顺序 |
| align-self | 在弹性盒子的子元素上使用，用来覆盖容器的 align-items 属性 |
| flex | 设置弹性盒子中子元素如何分配空间 |
| flex-grow | 设置弹性盒子的扩展比率 |
| flex-shrink | 设置弹性盒子的收缩比率 |
| flex-basis | 设置弹性盒子伸缩基准值 |
按照作用范围的不同，这些属性可以分为两类，分别为容器属性（flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content）和项目属性（order、align-self、flex、flex-grow、flex-shrink、flex-basis）。
align-items
align-items 属性用来设置弹性盒子中元素在侧轴（纵轴）方向上的对齐方式，属性的可选值如下：
| 值 | 描述 |
|---|---|
| stretch | 默认值，项目将被拉伸以适合容器 |
| center | 项目位于容器的中央 |
| flex-start | 项目位于容器的顶部 |
| flex-end | 项目位于容器的底部 |
| baseline | 项目与容器的基线对齐 |
| initial | 将此属性设置为属性的默认值 |
| inherit | 从父元素继承属性的值 |
justify-content
justify-content 属性用于设置弹性盒子中元素在主轴（横轴）方向上的对齐方式，属性的可选值如下：
| 值 | 描述 |
|---|---|
| flex-start | 默认值，左对齐 |
| flex-end | 右对齐 |
| center | 居中 |
| space-between | 两端对齐，项目之间的间隔是相等的 |
| space-around | 每个项目两侧的间隔相等 |
| initial | 将此属性设置为属性的默认值 |
| inherit | 从父元素继承属性的值 |
