網頁美工設計

網頁設計中flex布局垂直水平居中

編輯：時間：2018-01-02 08:25:58

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

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

　　學會使用flexbox

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

　　#container {

　　display: flex;

　　}

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

　　#container {

　　display: inline-flex;

　　}

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

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

　　#container{

　　justify-content:center;

　　display:flex;

　　}

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

　　核心代碼如下：

　　#container{

　　display:flex;

　　justify-content:center;

　　align-items: center;

　　}

　　#center{

　　}

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

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

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

<< 上一篇：網頁設計flex布局瀏覽器兼容解決方案

>> 下一篇：網站制作的網頁頁面該如何設計

推薦資訊