共计 2095 个字符，预计需要花费 6 分钟才能阅读完成。
这篇文章主要是分享了三个例子 (垂直居中、响应式、圣杯)，介绍了 Flexbox 的主要应用场景，并与传统方式对比，感受 Flexbox 布局带来的便捷开发体验。
1 垂直居中对齐
-
不使用 Flexbox
<style> .main1 { position: relative; height: 200px; background: #8A469B; } .main1 div { display: block; width: 50%; height: 50%; background: #EA7F26; overflow: hidden; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .main1 div span { position: absolute; margin: 0; padding: 0; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #EA7F26; } .main2 { height: 200px; display: flex; justify-content: center; align-items: center; background: #8A469B; } .main2 div { width: 50%; height: 50%; display: flex; justify-content: center; align-items: center; background: #EA7F26; } </style> <body> <h3> 不使用 Flexbox</h3> <div class="main1"> <div> <span> 侠课岛 </span> </div> </div> <h3> 使用 Flexbox</h3> <div class="main2"> <div> <span> 侠课岛 </span> </div> </div> </body> -
使用 Flexbox
display: flex; justify-content: center; align-items: center;
使用与否呈现的效果都是一样的
2 自适应导航
-
不使用 Flexbox
.main {text-align: right;} .main li {display: inline-block;} /* 小于 800px 大于 600px */ @media screen and (max-width: 800px) { .main { text-align: justify; text-align-last: justify; } } /* 小于 600px */ @media screen and (max-width: 600px) { .main li {display: block;} .main a { display: block; text-align: center; text-align-last: center; } } -
使用 Flexbox
.main { display: flex; flex-flow: row wrap; justify-content: flex-end; } /* 小于 800px 大于 600px */ @media screen and (max-width: 800px) { .main {justify-content: space-between;} } /* 小于 600px */ @media screen and (max-width: 600px) { .main {flex-flow: column nowrap;} }
3 圣杯布局
什么是圣杯布局？比如下面的图片所示：上面是一个标题、中间是左边是目录，中间是内容，右测是一些推荐，底部是一个版权声明。
圣杯布局和双飞翼布局的共同特点都是利用 float+margin 的负值来实现并列的结构。
-
不使用 Flexbox
.left,.middle,.right { position: relative; float: left; height: 100%; } .container { padding:0 200px 0 200px; height: calc(100% - 120px); } .left { margin-left: -100%; left: -200px; width: 200px; background-color: #ffff99; } .right { margin-left: -200px; right: -200px; width: 200px; background-color: #ffff99; } .middle { width: 100%; background-color: #EE8888; word-break: break-all; } .header { height: 80px; background-color: #cdcdcd; } .footer { height: 40px; background-color: #cdcdcd; clear: both; } -
使用 Flexbox
.flex { display: flex; flex-wrap: nowrap; } .leftBar { width: 200px; flex-shrink: 0; } .container {width: 100%;} .rightBar { width: 200px; flex-shrink: 0; }
正文完
