weui.css中flex容器下子项目的水平和垂直居中

来源：互联网发布：易语言传世登陆器源码编辑：程序博客网时间：2024/05/02 02:15

想用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; 的子节点（没孙子节点什么事）。

0 0