weui.css中flex容器下子專案的水平和垂直居中
想用weui.css寫微信平臺的頁面,發現沒有讓flex(weui-flex)容器下,子專案(weui-flex__item)居中的類。
百度了一下,是用justify-content:center;實現水平居中,用align-items:center 實現垂直居中。
可是當我這樣寫的時候,竟然沒有用!
<!-- style --> <style> .justify{ justify-content: center; } .align{ align-items: center; } </style> <!-- HTML --> <div class="weui-flex justify"> <div class="weui-flex__item"> <p>AAAA</p> </div> <div class="weui-flex__item"> <p>BBBB</p> </div> </div>
頁面效果是這樣的:
頁面style是這樣的:
注意! 這裡的 div{display:block;}
------------------以上為初次嘗試結果,下面說一下正確結果及上面無法實現的原因--------------------
當我不使用 weui-flex__item 來實現子專案等分空間,而是使用width來控制時,發生了這樣一幕:
-----程式碼-----
<!-- style --> <style> .justify{ justify-content: center; } .align{ align-items: center; } .wid{ width: 100px; height: 5em; } </style> <!-- html --> <div class="weui-flex justify"> <div class="wid"> <p>AAAA</p> </div> <div class="wid"> <p>BBBB</p> </div> </div> <div class="weui-flex justify"> <p class="wid" style="background: red;">11111</p> <p class="wid" style="background: blue;">22222</p> </div> <div class="weui-flex justify"> 33333 </div>
-----頁面效果-----
-----頁面style-----
外層div-
-
子元素 p
總結髮現:display: flex; 只對自身起作用,子元素依舊是 display: block;
當flex-direction:row時justify-content: center;(垂直居中),align-items: center;(水平居中)
而這裡justify-content: center;(水平居中) align-items: center;(垂直居中) ,
這裡之所以和網上的說法相反,是因為weui中的flex-direction的屬性值設定為column了,
要作用在 display屬性為flex的標籤上才會對其子元素起作用(只有子元素,孫子都不好使)。
而我們還像用 flex:1來實現等分,那麼就出現了我最後的結果。關於flex:1,看這裡。
寫在一起。
上程式碼
<style> .justify{ justify-content: center; } .align{ align-items: center; } .wid{ height: 5em; } </style>
<div class="weui-flex">
<div class="weui-flex__item weui-flex justify align">
<p>AAAA</p>
</div>
<div class="weui-flex__item weui-flex justify">
<p>BBBB</p>
</div>
</div>
頁面效果
這裡順便寫了一下垂直居中,如何實現一看便知。
垂直居中和水平居中效果的實現,關鍵就在於display,以及作用的範圍是 display: flex; 的子節點(沒孫子節點什麼事)。