網(wǎng)頁(yè)美工設計

網(wǎng)頁(yè)設計中flex布局垂直水平居中

編輯：時(shí)間：2018-01-02 08:25:58

　　flexbox布局(Flexible Box)模塊旨在提供一個(gè)更加有效的方式制定、調整和分布一個(gè)容器里的項目布局，即使他們的大小是未知或者是動(dòng)態(tài)的。是CSS3 中一個(gè)新的布局模式，為了現代網(wǎng)絡(luò )中更為復雜的網(wǎng)頁(yè)需求而設計。

　　Flexbox 已經(jīng)被瀏覽器快速支持。Chrome 22+, Opera 12.1+, 和 Opera Mobile 12.1+ ，firefox18+已經(jīng)支持了本文中所描述的 Flexbox。

　　學(xué)會(huì )使用flexbox

　　要為元素設置flexbox布局，只需將display屬性值設置為flex。

　　#container {

　　display: flex;

　　}

　　flexbox的默認為一個(gè)塊級元素，如果需要定義為一個(gè)行內級的元素，同理：

　　#container {

　　display: inline-flex;

　　}

　　flexbox由伸縮容器和伸縮項目組成。通過(guò)設置元素的display屬性為flex或者inline-flex可以得到一個(gè)伸縮容器。設置為flex的容器被渲染為一個(gè)塊級元素，而設置為inline-flex的容器則渲染為一個(gè)行內元素。而每一個(gè)被設置為flex的容器，它的內部元素都將變成一個(gè)flex項目，即是一個(gè)伸縮項目。簡(jiǎn)單的說(shuō)，flex 定義了伸縮容器內伸縮項目該如何布局。

　　回到正題，利用flexbox實(shí)現多塊狀元素的水平居中，只需要將父級容器的Css設置如下：

　　#container{

　　justify-content:center;

　　display:flex;

　　}

　　使用flex布局，無(wú)需絕對定位等改變布局的操作，可以輕松實(shí)現元素的水平垂直居中。

　　核心代碼如下：

　　#container{

　　display:flex;

　　justify-content:center;

　　align-items: center;

　　}

　　#center{

　　}

　　代碼還是相當的整潔的，在Flex布局中，作用對象是子元素與及父元素，所以在這里我們不妨把body當作一個(gè)正常的標簽使用，雖然很少這樣用，但是為了說(shuō)明body標簽也是很接地氣的，所以本例中使用了body標簽作為box的父元素。

　　現在我們來(lái)分析下代碼，在Flex有兩個(gè)東西，一個(gè)是Flex容器(子項目父元素)，另一個(gè)是子項目(Flex容器子元素)。如果不給.box添加樣式，一個(gè)h1標簽占一行，也就是頁(yè)面會(huì )顯示三行文字“flex彈性布局justify-content屬性實(shí)現元素水平居中”。如果我們給.box添加了 display: flex;那么三個(gè)h1標簽就妥妥地在一行里排列了，相當于浮動(dòng)，只不過(guò)他不會(huì )因為超出了.box的寬度而換行，他總是會(huì )在一行內顯示。

　　由于彈性容器.box添加了 display:flex; 屬性，子項目默認是水平排列的，所以給.box追加一個(gè) flex-direction:column 屬性來(lái)讓子項目垂直排列。此時(shí)垂直方向作為主軸，所以我們可以使用一個(gè) justify-content:center 來(lái)讓所有子項目在垂直方向上居中。為了讓h1標簽內的文字也水平居中，我們也給了h1一個(gè)dislay:flex;以及 justify-content:center，由于h1是默認的水平排列，所以 justify-content:center 就可以讓文字在水平方向上居中。

<< 上一篇：網(wǎng)頁(yè)設計flex布局瀏覽器兼容解決方案

>> 下一篇：網(wǎng)站制作的網(wǎng)頁(yè)頁(yè)面該如何設計

推薦資訊