[CSS] flex布局实现每行固定个数,超出换行,并根据屏幕分辨率自适应布局

2022-09-30 53点热度 0人点赞 0条评论

实现目标

使用flex布局,在每一行上,需要固定X个元素,超过的元素做换行处理。

实现

假设如下Html代码:

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

实现一行显示child子div,CSS如下:

<style>
   .parent {
     width: 100%;
     height: 150px;
     display: flex;
     flex-flow: row wrap;
     align-content: flex-start;
   }

   .child {
     box-sizing: border-box;
     background-color: white;
     flex: 0 0 33%;
     height: 50px;
     border: 1px solid red;
   }
</style>

.child类上,flex: 0 0 33%,相当于100%的宽度,每行多少个元素,就用100%去除以个数,得出来的数值。

效果如图所示(可以根据屏幕分辨率改变宽度,如果不够宽度,可以自动调整个数。):

admin

这个人很懒,什么都没留下

文章评论

您需要 登录 之后才可以评论