弹性盒式布局主要包括两种弹性容器：块级弹性容器：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；（所有元素作为一个整体在容器的垂直方向居中显示）
感觉这个弹性盒式布局超好用，之前反复调整的一些布局用一行特性就可以调整好，就比如说上方列出的一些子元素在父元素内均匀分布的，感觉之前的网页要用这个布局可以少些几百行的代码，还有一些关于多行特性没有列出，我只能说它真的很厉害，据说响应式布局也挺牛的，下一个目标就是它了。
最后来一个今日份的自我激励：加油
网友评论