处理display:flex特性 justify

日期:2021-01-20 类型:科技新闻 

关键词:秀米制作h5,h5如何制作,h5小游戏制作,h5游戏开发,免费的h5制作网站

display:flex特性 justify-content: space-between换行后的排版难题

<style>
.wrap {
    width: 400px;
    display:flex;  /*延展性盒子*/
    justify-content: space-between;  /*两边对齐,子元素之间有空隙*/
    flex-flow: row wrap;/*子元素外溢父器皿时换行*/
}
span {width: 100px;background-color: green;color:#fff;border-radius: 5px;margin-top: 10px;padding: 10px;}
</style>
<div class="wrap">
    <span>11</span>
    <span>22</span>
    <span>33</span>
    <span>44</span>
    <span>55</span>
</div> 

处理方式:追加1个空的子元素

.wrap:after {content: ""; width: 120px; }

PS:下面看下display:flex; justify-content:space-between; 最终1行显示信息內容没法靠左显示信息

给父元素加上同每行展现列数1样(展现目录数最多的)的子元素。

子元素设定款式:

width:同子元素1样的width ;

height:0;
 

总结

以上所述是网编给大伙儿详细介绍的处理display:flex特性 justify-content: space-between换行后的排版难题 ,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑欢迎给我留言,网编会立即回应大伙儿的!

上一篇:详解CSS粘性精准定位 sticky 返回下一篇:没有了