如何利用flex布局多行多個(gè)div水平垂直居中

<p class="content" > 
 <p class="chart"></p>
 <p class="chart"></p>
 <p class="chart"></p>
 <p class="chart"></p>
 <p class="chart"></p>
 <p class="chart"></p> 
</p>

這次采用的是flex布局，因?yàn)椴捎胒lex布局的話瀏覽器都會(huì)幫我們計(jì)算好，在這里父元素需要進(jìn)行flex布局，flex布局下會(huì)有一條主軸和垂直的交叉軸，主軸默認(rèn)是水平方向的，交叉軸默認(rèn)就垂直方向的，可以通過flex-direction屬性去改變，具體的flex布局可參考阮一峰老師的教程：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.htmlcss

CSS代碼如下：

.content { 
 display: flex; 
 flex-wrap: wrap; 
 align-items: center; 
 width: 100%; 
 height: 100%;
 }

flex-wrap屬性是指flex布局下的元素是否需要換行，該屬性一共可取三個(gè)值，分別是nowrap，wrap，wrap-reverse。默認(rèn)值是nowwrap（不換行），wrap指子元素?fù)Q行，并且第一行在上面，wrap-reverse指子元素?fù)Q行，第一行在下面。

align-items屬性定義項(xiàng)目在交叉軸上如何對(duì)齊，在這里交叉軸的默認(rèn)方向是垂直方向，我們選擇的值center，也就是與交叉軸的中點(diǎn)對(duì)齊，該屬性共有以下幾個(gè)值：

flex-start：交叉軸的起點(diǎn)對(duì)齊。flex-end：交叉軸的終點(diǎn)對(duì)齊。center：交叉軸的中點(diǎn)對(duì)齊。baseline: 項(xiàng)目的第一行文字的基線對(duì)齊。
stretch（默認(rèn)值）：如果項(xiàng)目未設(shè)置高度或設(shè)為auto，將占滿整個(gè)容器的高度。

這樣我們達(dá)到了垂直居中的目的，還需要水平居中。

需要垂直居中的子元素的樣式代碼如下：

.chart { 
 display: inline-block; 
 width: 30%; 
 height: 40%; 
 margin: 0 auto; 
 border: 1px solid #000;
 }

display: inline-block為了讓p同一行顯示，在這里的寬度和高度決定了一行可以顯示多少個(gè)p區(qū)塊。

margin: 0 auto就是為了讓子元素水平居中，auto就是自動(dòng)的意思，瀏覽器會(huì)幫助我們進(jìn)行計(jì)算，這樣我們就達(dá)到了水平垂直居中了。

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com