1. flexbox-CSS3弹性盒模型flexbox布局通俗讲解。
为何叫弹性盒子，可以有效的分配一个容器的空间 ，即使我们的容器元素尺寸改变 它内部的元素也可以调整它的尺寸来适应空间 。
弹性盒（Flebox）模型旨在提供一种更有效的方式，为文档中的元素之间进行布局、对齐和分配空间 - 即便视口和元素的大小是动态变化的或者未知的，也能很好适应。
1）弹性容器，首先父元素如何设置？
- 首先开始使用弹性盒模型，只需先定义一个弹性容器（Flex Container）。即父元素设置display：flex或者display:inline-flex。
补充下display：flex和display:inline-flex的区别：如果父元素没有设置width，display：flex情况下父元素宽度会定为父元素的父元素宽度。display:inline-flex情况下父元素会自适应子元素宽度。
- 好了，将父元素设置成弹性容器后，我们就可以在弹性容器上用几个对齐属性了。(弹性项目flex-items,即弹性容器里的子元素）
- flex-direction:row（默认） || column || row-reverse || column-reverse;（row是英文“行”，column是英文“列”意思，reverse是“反转，颠倒”的意思）控制弹性项目沿着主轴排列的方向。（direction是方向的意思）
这个属性决定你的子元素在弹性容器里是水平排放还是垂直排放（左到右，上到下），或者这两个方向颠倒！补充：从技术上讲，水平和垂直都不是弹性盒的世界中方向的叫法。它们被描述为主轴（main axis）和侧轴（cross axis）。
image.png
- flex-wrap:wrap（默认值，表示一行flex-items数量再多，都不换行，只会缩小自己的宽度来适应！） || no-wrap || wrap-reverse;（可以这样理解，wrap为“包裹的”意思，即wrap包裹了为不换行；no-wrap不包裹了，装不下了就换行了； wrap-reverse是多出的行往上面排列，no-wrap是多出行往下继续排列。）
- flex-flow:是 flex-direction 和 Flex-wrap的简写属性，同时带有这两个属性的值，类似于border。（flow英语“流动”的意思，这样理解，物体的 “流动 ”是有方向(direction)和是否溢出，即flow=direction+wrap.）
- align-items:flex-start || flex-end || center || stretch || baseline 定义弹性项目如何在侧轴方向对齐,和 flex-direction的区别之处。
- justify-content:flex-start (默认值)|| flex-end || center || space-between || space-around；定义弹性项目如何在主轴上对齐
我自己的通俗理解：
- justify:英语意思“使齐行；使每行排齐”，然后加上“content”内容，即是内容如何在行上（主轴）排列的。
flex-start:"开始的"意思，flex-start,即可以猜到是从行的起始处开始排列，即主轴的起点排列，接下来，行都换成主轴来说。如图：
image.pngflex-end：不加赘述，和flex-start 相反，在主轴的终点开始排列。如图：
image.pngcenter:英语意思“中间”，就可以理解为主轴的中间处开始排列,如图：
image.pngspace-between:让每个弹性项目之间保持相同的间距。如图：
image.pngspace-around:让弹性项目两侧的间距保持相同。如图：
image.png
好了，这是父元素要设置的属性，看似有点难记住。直接看图：
image.png
