-- 创造无限可能

css技巧：flex布局如何让flex元素间的距离相同且无首尾

2023-06-03 11:43:20
700 人浏览 0 人点赞
有用，点赞支持一下

使用场景：元素大小不一，但需要设置元素的间距相同

解决方案

  • flex-wrap：规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。。
  • justify-content：用于弹性盒子元素的布局方式

    实际案例

    ul{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
}
li{
width:30%;
height:100px;
}

相关文章