基礎(chǔ)的CSS3彈性盒Flexbox布局使用實(shí)例

AlloyTeam 發(fā)布時(shí)間：2016-04-08 12:04:01 作者：TAT.sheran

這篇文章主要介紹了基礎(chǔ)的CSS3彈性盒Flexbox布局使用實(shí)例,文中最后也提到了解決兼容性問(wèn)題的基本方法,需要的朋友可以參考下

flexbox是一個(gè)新的盒子模型，當(dāng)你給一個(gè)元素使用了flexbox模塊，那么它的子元素就會(huì)指定的方向在水平或者縱向方向排列。這些子元素會(huì)按照一定的比例進(jìn)行擴(kuò)展或收縮來(lái)填補(bǔ)容器的可用空間。flexbox有許多很好用的地方，下面就著重講述一下它的一些使用場(chǎng)景：

Example 1： flexbox等分布局

如果你要實(shí)現(xiàn)以下所示的樣式，你可能首先想到的是用float：
201648121454883.png (298×71)

CSS Code復(fù)制內(nèi)容到剪貼板

<ul id="ranktop3">
<li>
<div class="ranktab">1</div>
<p>fdeg</p>
<p>霸氣值：170</p>
</li>
<li>
<div class="ranktab">2</div>
<p>bling</p>
<p>霸氣值：160</p>
</li>
<li>
<div class="ranktab">3</div>
<p>lea</p>
<p>霸氣值：150</p>
</li>
</ul>
ul li {
width: 32.9%;
float: left;
border-right: 1px solid #fa9900;
padding: 5px 0;
}

但當(dāng)只有2個(gè)排名后，少了一個(gè)li節(jié)點(diǎn)后，就會(huì)展示如下：
201648121514023.png (300×68)

刪除兩個(gè)li節(jié)點(diǎn)后如下：
201648121536879.png (295×76)

但是用戶以及設(shè)計(jì)師肯定不希望看到這樣的界面。他們肯定希望界面是這樣的：
減少一個(gè)li節(jié)點(diǎn)后：
201648121619175.png (302×71)

刪除兩個(gè)li節(jié)點(diǎn)后如下：
201648121637365.png (299×69)

那么這里用display:flex布局是最好不過(guò)的了，新的flexbox布局模式被用來(lái)重新定義CSS中的布局方式：

CSS Code復(fù)制內(nèi)容到剪貼板

ul {
display:flex;//表示改直接子元素用flex布局，默認(rèn)橫向布局
}
ul li {
/*width: 32.9%;*/
/*float: left;*/
border-right: 1px solid #fa9900;
padding: 5px 0;
flex: 1;表示子元素之間平均分配
}

可見(jiàn)用flex布局非常完美，這就是flex布局的牛逼之處。很遺憾的是最近規(guī)范變動(dòng)過(guò)多，導(dǎo)致各個(gè)瀏覽器對(duì)它的實(shí)現(xiàn)也有所不同。為了兼容更多的瀏覽器，也可以這樣寫：

display: flex;display: -webkit-box;這兩個(gè)屬性的方法作用相同。

Example 2： flexbox不等分布局

CSS Code復(fù)制內(nèi)容到剪貼板

<div class="container">
<section class="initial">
<p>
空間足夠的時(shí)候，我的寬度是200px，如果空間不足，
我會(huì)變窄到100px，但不會(huì)再窄了。
</p>
</section>
<section class="none">
<p>
無(wú)論窗口如何變化，我的寬度一直是200px。
</p>
</section>
<section class="flex1">
<p>
我會(huì)占滿剩余寬度的1/3。
</p>
</section>
<section class="flex2">
<p>
我會(huì)占滿剩余寬度的2/3。
</p>
</section>
</div>
.container {
display: -webkit-flex;
display: flex;
}
.initial {
-webkit-flex: initial;
flex: initial;
width: 200px;
min-width: 100px;
/*空間足夠的時(shí)候，該div的寬度是200px，如果空間不足，該div會(huì)變窄到100px，但不會(huì)再窄了。*/
}
.none {
-webkit-flex: none;
flex: none;
width: 200px;
/*無(wú)論窗口如何變化，我的寬度一直是200px。*/
}
.flex1 {
-webkit-flex: 1;
flex: 1;
/*改div會(huì)占滿剩余寬度的1/3。*/
}
.flex2 {
-webkit-flex: 2;
flex: 2;
/*改div會(huì)占滿剩余寬度的2/3。*/
}

效果如下圖所示：
201648121657567.png (816×132)

Example 3： flexbox基本頁(yè)面布局

CSS Code復(fù)制內(nèi)容到剪貼板

<div class="container">
<nav>
<div class="container">
<nav>
<ul>
<li>
<a href="http://www.alloyteam.com/">menu1</a>
</li>
</ul>
</nav>
<div class="content">
<section >
...
</section>
<section>
...
</section>
</div>
</div>
.container {
display: -webkit-flex;
display: flex;
}
nav {
width: 200px; /*固定寬度*/
}
.content{
-webkit-flex: 1; /*除去nav的固定寬度后，剩下的寬度都是屬于content的*/
flex: 1;
}

效果如下圖所示：
201648121714566.png (707×239)

Example 4： flexbox的居中布局

CSS Code復(fù)制內(nèi)容到剪貼板

<div class="vertical-container">
<section class="vertically-centered">
<p>
CSS里總算是有了一種簡(jiǎn)單的垂直居中布局的方法了！
</p>
</section>
</div>
.vertical-container {
display: -webkit-flex;
display: flex;
height: 300px;
}
.vertically-centered {
margin: auto;
}

PS：解決兼容性問(wèn)題

對(duì)于Flexbox 以前的幾個(gè)版本可以使用Autoprefixer后處理程序來(lái)實(shí)現(xiàn)css3代碼自動(dòng)補(bǔ)全。比如：

CSS Code復(fù)制內(nèi)容到剪貼板

display: flex;

編譯后：

CSS Code復(fù)制內(nèi)容到剪貼板

display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;

如果你使用Sass，那么可以使用@mixin來(lái)解決flexbox版本兼容，直接@include進(jìn)來(lái)就可以輕松解決三個(gè)版本的兼容問(wèn)題；這樣可以支持到IE10 +, 移動(dòng)端瀏覽器和最新的FF, Safari, Chrome, IE11, Opera等。
github項(xiàng)目地址：sass-flex-mixin