各位入坑的前端朋友，我们分享了移动终端开发中流媒体布局的应用场景和注意事项。今天，我们将再次分享一种叫做灵活布局的布局。接下来，我们将从以下几个方面介绍灵活布局的使用。
00-1010 flex容器，只要页面中的任何元素设置了display:flex属性，当前框就称为弹性框。默认情况下，弹性框有两个默认水平显示的轴3360和一个始终垂直于主轴的侧轴(也称为横轴)。弹性框中的所有子元素沿主轴方向显示。
00-1010 :以携程手机页面为例。在网页中，当需要按照奇数等分父元素时，例如在携程中，红色区域将父元素等分3。如果使用流式布局，需要设置33.33%。如果使用灵活布局，只需要为每个子元素设置一个属性flex:1，即可快速实现。
:以淘宝网页为例。当我们需要页面中的多个子元素以适中的左右距离快速显示在父元素中时，此时不需要设置任何px值，只需为元素设置justice-content 3360 space-round即可。
:以携程为例。当页面中的子元素按照其他比例划分父元素时，仍然可以通过弹性框中的flex快速实现。如图：所示，红色区域按照2:1:2和2:13:1的比例显示。
如果我们在编写手机页面(包括PC页面)时遇到以上情况，灵活布局是最好的选择。
00-1010很多朋友都知道灵活布局很好用，但是属性太多太难记，容易混淆属性对应的效果，所以接下来我就总结几个在灵活布局中必须掌握的属性。
:柔性布局的第一步是将父元素设置为弹性框，即设置属性：display:flex。如代码所示，
:设置伸缩箱主轴方向。默认情况下，伸缩框中的主轴水平显示，因此默认元素显示在一行中。您可以通过flex-direction属性调整主轴的方向并更改元素的显示模式。
flex-direction:行的显示效果如下图：所示。
flex-direction:row-reverse的显示效果如下图：所示。
flex-direction :列的显示效果如下图：所示。
Flex-方向：列反转的显示效果如下图：所示。
:通过以下方式设置元素在主轴方向的对齐显示模式
justify-content属性实现justify-content:flex-start的显示效果如下:
justify-content:flex-end的显示效果如下:
justify-content:space-between的显示效果如下:
justify-content:space-around的显示效果如下:
④:设置弹性盒子中元素在侧轴(交叉轴)方向的对齐方式通过align-items实现.
align-items: stretch 默认值的显示效果如下:
align-items:flex-start显示效果如下:
align-items:flex-end显示效果如下:
align-items:center显示效果如下:
⑤:在伸缩盒子中,默认所有的子元素超出父容器宽度后都不换行显示,如果希望让超出父元素后换行显示,可以通过flex-wrap属性实现
flex-wrap:nowrap 默认效果如下:
flex-wrap:wrap 显示效果如下:
⑥:在伸缩和中元素换行后设置多行对齐方式,通过align-content属性实现
align-content:stretch默认值显示效果:
align-content:flex-start 显示效果如下:
align-content:flex-end 显示效果如下:
align-content:center 显示效果如下:
align-content: space-between 显示效果如下
align-content: space-around显示效果如下:
以上属性都是给弹性盒子设置的属性,各位小伙伴要注意.如下代码所示:
⑦:如果希望弹性盒子中子元素按照任何一个比例显示,可以给子元素设置flex属性,如下图所示:
Flex: 1.代表子元素占父元素空间宽度的一份.
Felx:2代表子元素占父元素空间宽度的2份,依次类推
三: 弹性布局优缺点分析
弹性布局在网页中实现快速分配比例,盒子快速对齐优势很大,因为通过简单的几个属性就可以实现,进而减少我们设置具体值.但是弹性布局中的属性对于浏览器版本要求比较严格,如果浏览器版本太低那么弹性布局中的属性是无法正常使用的.如下图所示:
写在最后的几句话,送给大家.学习任何知识都不是为了去解决某个特定问题的.我们学的知识可以当成是我们工具包中的一个新工具.在恰当的时候使用恰当的工具解决问题就可以了.针对弹性布局中还有其他属性,由于我们在写页面的过程中不是经常用到,所以今天主要分享给大家弹性布局中我们必须会的. 好的这个章节就讲到这里。
黑马最新活动：
黑马程序员2020年java中级程序员学习路线图、全部资源免费大放送，点击下方：“了解更多”的链接就可进入页面领取哦。