多列布局使用flex存在的问题

NiiiiY

已于 2024-08-01 16:22:49 修改

阅读量161

点赞数 3

文章标签： javascript css css3

于 2024-08-01 16:19:34 首次发布

本文链接：https://blog.csdn.net/qq_41619265/article/details/140850100

版权

解决flex布局justify-content: space-between的痛点

当我们使用flex布局，设置justify-content: space-between，假如一行有4个div元素，当最后一行的元素小于4个时，会出现两端对齐中间留白的情况(如图所示)，针对这个问题，可以通过使用grid布局完美解决

在这里插入图片描述

 <div className='demostyle'>
          <div className='boxitem'>box1</div>
          <div className='boxitem'>box2</div>
          <div className='boxitem'>box3</div>
          <div className='boxitem'>box4</div>
          <div className='boxitem'>box5</div>
          <div className='boxitem'>box6</div>
        </div>

.demostyle{
    width: 100%;
    height: 100px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 10px;
    .boxitem{
        display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #4a90e2;
    }
}

最终实现效果
在这里插入图片描述