2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在能很安全地使用这项功能。
在没有学习flex布局之前，小P写页面只会使用UI框架自带的布局组建。而很多情况下，UI框架有很大的局限性。遇到问题如果强行往框架上靠，往往页面会写得非常臃肿，而且难以维护。
自从偶然间听到了有flex这个东西以后，小P狠狠啃了一下。后来的工作中，小P刻意地使用flex来实现布局。虽然刚开始进度缓慢，但是慢慢地小P发现，几乎所有的布局问题都可以使用flex来实现。
下面给大家介绍几个使用flex布局可以轻松实现的布局问题。
一、子元素绝对居中
如果让朋友们去做水平居中，那很简单，可能使用margin或者text-align可以很简单的实现。但是如果要实现垂直居中那就不是那么简单了。
这个时候如果使用flex布局，只需要简单的设置一下父容器就可以实现。
class="parent"> <div class="child">div></div>
.parent{ width: 300px; height: 300px; background: red; display: flex; justify-content: center; align-items: center; .child{ width: 100px; height: 100px; background: blue; }}二、行等分
用过bootstrap的朋友可能会想到使用栅格布局，一行分成12份，一个子元素占用3份；或者使用宽度25%来实现这个功能。但是如果一行排列5个元素呢？一行排列7个元素呢。不是很灵活吧。
这个时候flex布局就可以大显身手了。
class="row"> class="col">子元素1 class="col">子元素2 class="col">子元素3 class="col">子元素4.row{ display: flex; .col{ flex: 1; }}flex:1代表子元素等分父容器。有了flex布局，别说一行排列7个，排列10个也不是问题。
三、后台管理系统
最后给大家使用flex实现一个常用的后台管理系统的页面布局。
<body> <div class="header">头部div> <div class="center"> <div class="menu">菜单栏div> <div class="content">内容区div> div> <div class="footer">尾部div>body>*{ margin: 0px; padding: 0px;}html,body{ height: 100%;}body{ display: flex;//整体是flex布局 flex-direction: column;//竖向排列 .header{ height: 100px; background-color: red; } .center{ flex: 1;//头尾固定高度，其余高度都给中间部分 display: flex;//中间部分又是flex布局 flex-direction: row;//中间部分横向排列 .menu{ width: 100px; background-color: #ccc; } .content{ flex: 1;//中间部分左侧的菜单栏是固定宽度，其余宽度都给内容区 } } .footer{ height: 50px; background-color: red; }}朋友们，你们在工作中哪些场合用到了flex布局，私信给小P分享给更多程序员朋友吧。
扫一扫
410
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
