弹性盒式布局---弹性容器

弹性盒式布局主要包括两种弹性容器：块级弹性容器：display：flex；行内块级弹性容器：displaqy：inline-flex；

以下是子元素在利用弹性盒式布局来决定在父元素中的分布：

flex-direction：row；：其子元素默认从左到右水平排列

direction:row-reverse；其子元素从右到左水平排列flex-direction:column;：其子元素从上到下垂直排列

flex-direction:column-reverse：其子元素从下到上垂直排列

flex-wrap,wrap-reverse:norap(默认)，wrap，wrap-reverse(元素在主轴上是否换行）

flex-wrap：nowrap默认不换行，元素自动缩小填充容器

flex-wrap：wrap（换行，弹性元素超出容器边界换到下一行）

flex-wrap:wrap-reverse(换行，弹性元素反转排列)

flex-flow：flex-direction，flex-wrap：定义主轴方向及弹性元素是否换行

flex-flow：row nowrap（默认不换行，元素自动缩小填充容器）

flex-flow：row wrap（换行，弹性元素超出容器边界的换到下一行显示）

flex-flow：row wrap-reverse（与上方的元素差不多就是把行反过来）justify-content：flex-start（默认值），flex-end，center，space-between，space-around，space-evenly（弹性盒子在垂直轴上的对齐方式与空间分布）

justify-content：flex-start（从起点开始排列）

justify-cntent：flex-end（子盒子从父盒子末端开始排列）

justify-content：center（子元素整体在父元素的中间显示）

justify-content:space-between（子元素在父元素内均匀分布）

justify-content：space-around（子元素在父元素内分布时每个子元素两边空间相等

justify-content：space-evenly（两端元素到两端以及香菱两个元素之间的距离相等）

align-items：stretch（默认），flex-start，flex-end，center（定义弹性元素在主轴上的垂直对齐方式）

align-items：stretch(元素高度自动拉伸充满整个容器)

align-items：flex-start；（子元素紧贴在父元素开始的地方）

align-items：flex-start；（子元素紧贴在父元素开始的地方）

align-items：center；（所有元素作为一个整体在容器的垂直方向居中显示）

        感觉这个弹性盒式布局超好用，之前反复调整的一些布局用一行特性就可以调整好，就比如说上方列出的一些子元素在父元素内均匀分布的，感觉之前的网页要用这个布局可以少些几百行的代码，还有一些关于多行特性没有列出，我只能说它真的很厉害，据说响应式布局也挺牛的，下一个目标就是它了。

        最后来一个今日份的自我激励：加油