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; 的子節點（沒孫子節點什么事）。 

 

 

希望可以得到分享和指正。