上一篇《Flex布局 学习（一）》主要学了flex的基本用法及作用，现在来把flex具体运用到实例中，看看flex的弹性布局效果。
一、垂直居中布局
不知道有多少小伙伴在前端笔试面试时被问到：不定宽高如何水平垂直居中？
现在就给大家解答下这问题，最简单的实现方法就是我们的flex布局，只是在我们容器（父元素）加上一行代码即可。看下面例子
HTML部分
<div id="box1"> <span class="item"> 垂直居中 </span> </div>
CSS部分
#box1{
width: 500px;
height: 300px;
border: 1px solid red;
box-sizing: border-box;
display: flex;
justify-content: center;/*X轴水平居中*/
align-items: center;/*y轴垂直居中*/
}
.item{
width: 100px;
height: 100px;
background-color: pink;
}
效果如下：
二、用flex布局制作导航栏
以前我们制作导航栏的时候是使用float、table或display：inline-block.这些方法虽然能实现但也有一些问题存在，比如浮动会影响父元素以及兄弟元素的样式，需要清除浮动。但flex不一样，它属于弹性布局。
HTML部分
<nav id="box2"> <ul> <li><a>×××有限公司</a></li> <li><a>首页</a></li> <li><a>关于我们</a></li> <li><a>联系我们</a></li> <li><a>产品案例</a></li> <li><a>新闻动态</a></li> </ul> </nav> <nav id="box2"> <ul> <li><a>×××有限公司</a></li> <li><a>首页</a></li> <li><a>关于我们</a></li> <li><a>联系我们</a></li> </ul> </nav>
CSS部分
#box2 ul { display: flex; background-color: cornflowerblue; } #box2 li{ flex: 1; text-align: center; line-height: 50px; list-style: none; border-right: 1px solid gainsboro; } #box2 li a{ text-decoration: none; }
效果：
三、悬挂式布局
类似左图右文那种
HTML部分
<div class="contain"> <div class="left"><img src="img/a1.png"></div> <div class="right"> <p>游戏悍将 35英寸曲面电竞显示器</p> <span>现价：￥999</span> <span style="text-decoration: line-through;">原价：￥1300</span> <div class="btn">立即参与</div> </div> </div>
CSS部分
.contain{ width: 300px; height: 100px; border: 1px solid purple; display: flex; } .contain>div{ flex: none; } .left img{ width: 100px; height: 100px; } .right{ width: 200px; height: 300px; font-size: 12px; position: relative; } .right .btn{ width: 50px; height: 30px; line-height: 30px; background-color: cornflowerblue; border: 1px solid red; color: #FFFFFF; position: absolute; right: 20px; top: 60px; }
效果：
四、多列布局
HTML部分
<div id="box3"> <div class="picture"><img src="img/pic4.jpg"/></div> <div class="info"> <p>姓名：莹草</p> <p>等级：R级</p> <p>技能：治疗、回血、吸血</p> <span>来源：网易手游《阴阳师》</span> </div> <div class="btn">确认</div> <div class="btn">取消</div> </div>
CSS部分
#box3{ margin: 0 auto; width: 600px; height: 160px; border: 1px solid pink; display: flex; justify-content: space-around; } #box3>div{ flex: none; } #box3 .picture img{ width: 200px; height: 150px; } #box3 .btn{ width: 50px; height: 30px; line-height: 30px; text-align: center; background-color: cornflowerblue; border: 1px solid red; color: #FFFFFF; align-self: flex-end; }
效果：
五、网格布局
5.1 基本网格布局，平均分配
<style type="text/css"> #box4{ display: flex; } #box4 .item{ flex: 1; border: 1px solid green; } </style> <div id="box4"> <div class="item item1">1/4</div> <div class="item item2">1/4</div> <div class="item item3">1/4</div> <div class="item item4">1/4</div> </div>
效果：
5.2 百分比布局
<!--某一个固定--> <style type="text/css"> #box5{ display: flex; } #box5 .item{ flex: 1; border: 1px solid green; } #box5 .item2{ flex: 0 0 50%; } </style> <div id="box5"> <div class="item item1">auto</div> <div class="item item2">1/2</div> <div class="item item3">auto</div> <div class="item item4">auto</div> </div> <!--两个固定--> <style type="text/css"> #box6{ display: flex; } #box6 .item{ flex: 1; border: 1px solid green; } #box6 .item2{ flex: 0 0 50%; } #box6 .item4{ flex: 0 0 20%; } </style> <div id="box6"> <div class="item item1">auto</div> <div class="item item2">1/2</div> <div class="item item3">auto</div> <div class="item item4">1/5</div> </div> <!--三个固定--> <style type="text/css"> #box7{ display: flex; } #box7 .item{ flex: 1; border: 1px solid green; } #box7 .item1{ flex: 0 0 10%; } #box7 .item2{ flex: 0 0 50%; } #box7 .item4{ flex: 0 0 20%; } </style> <div id="box7"> <div class="item item1">1/10</div> <div class="item item2">1/2</div> <div class="item item3">auto</div> <div class="item item4">1/5</div> </div>
效果
六、圣杯布局
前几次我分享了用float进行的圣杯布局，今天说下用flex来实现这经典三栏式布局
<style type="text/css"> #box8{ display: flex; flex-direction: column; } #box8 div{ flex: 1; } .body{ display: flex; } .footer{ flex: 0 0 20%; !important; background-color: deepskyblue; } .head{ background-color: deepskyblue; flex: 0 0 20%;!important; } .left{ background-color: red; flex: 0 0 20%;!important; } #box8 .right{ background-color: yellow; flex: 0 0 20%;!important } </style> <div id="box8"> <div class="head"> header </div> <div class="body"> <div class="left"> left </div> <div class="middle"> main </div> <div class="right"> right </div> </div> <div class="footer"> footer </div> </div>
效果
七、搜索框制作
关于搜索框的制作，曾经也发过用float制作的，在我那篇《HTML+CSS 简易搜索框》有分享过相关代码，这次我们用flex来制作这个搜索框
<style type="text/css"> .search{ margin: 0 auto; display: flex; box-sizing: border-box; width: 400px; height: 38px; border:solid 1px red; } .kc span{ width: 46px; height: 40px; text-align: center; line-height: 40px; } input{ flex: 1; outline: none; border: none; box-sizing: border-box; padding-left: 10px; } </style> <div class="search"> <div class="kc"> <span>课程</span> </div> <input type="text" placeholder="行家专业亲授，直击就业痛点"/> <button>搜索</button> </div>
效果
新手小白的笔记到此为止，对于没写的流式布局、固定的footer栏还有各种详细的骰子布局，大家可以去看阮一峰老师的《Flex 布局教程：实例篇》