首页 前端知识 flex布局对齐方式设置space-between,将最后一行元素左对齐

flex布局对齐方式设置space-between,将最后一行元素左对齐

2024-01-29 14:01:27 前端知识 前端哥 926 912 我要收藏

flex布局对齐方式设置space-between,将最后一行元素左对齐

给盒子设置 justify-content: space-between , 可以均匀排列盒子中的每个元素,首个元素放置于起点,末尾元素放置于终点。达到左右对齐的效果。

但当最后一行元素不能铺满盒子时,会在盒子中均分排列,效果并不是我们需要的。

在这里插入图片描述
盒子设置flex布局, 对齐方式设置 justify-content: space-between时,将最后一行元素左对齐,有一下几种方法:

1. 使用占位元素:

特点:适用于任意列数布局,比较简单,缺点是会产生空标签
方案:使用循环体循环一整行空元素。宽度为单个元素宽度,高度为0

code

html

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <!-- 假设一行有5列,即5个元素 -->
  <li v-for="item in 5" :key="item" class="temp"></li>
</ul>

css

ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

li {
  width: 18%;
  margin-bottom: 20px;
  height: 200px;
  background: pink;
}

.temp { 
  width: 18%; 
  height: 0; 
  margin: 0; 
} 

效果

在这里插入图片描述

2. 给父级元素后面添加伪元素

特点:只针对三列布局
方案:通过 ::after 选择器,给父元素添加伪元素

code

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

css

ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

li {
  width: 30%;
  margin-bottom: 20px;
  height: 200px;
  background: pink;
}

ul:after { 
  content: ''; 
  width: 30%;
}

效果

在这里插入图片描述

3. 计算方式

特点:适用于每一行列数固定,且列宽度固定,需要进行计算,相比较复杂
方案: 对于最后一行的元素动态设置margin-right。判断如果最后一个元素处于当前列,会发生布局错乱,则设置元素的 margin-right 为剩余空间的大小(剩余列宽度+剩余间隙大小)。假设元素宽度是$width,总间隙是 $space(盒子宽度-元素宽度*列数)。

计算公式: margin-right: calc( ($space / 间隙数) * 剩余列数 + $width * 剩余列数 )

三列布局

计算方法:

最后一个元素所处列数剩余空间margin-right
第二列(li:last-child:nth-child(3n - 1))第三个元素宽度+剩余间隙($space / 2) * 1 + $width * 1

code

/* 三列布局,li宽度为30%,则剩余间隙:100% - 30% * 3 = 10% */
/* 如果最后一行是2个元素 calc(10% / 2 * 1 + 30% * 1) 可简化 */
ul>li:last-child:nth-child(3n - 1) { margin-right: calc(10% / 2 + 30%) }

四列布局

计算方法:

最后一个元素所处列数剩余空间margin-right
第二列(li:last-child:nth-child(4n - 2))第三个元素宽度+第四个元素宽度+剩余间隙($space / 3) * 2 + $width * 2
第三列(li:last-child:nth-child(4n - 1))第四个元素宽度+剩余间隙($space / 3) * 1 + $width * 1

code

/* 四列布局,li宽度为22%,则剩余间隙:100% - 22% * 4 = 12% */
/* 如果最后一行是2个元素 calc(12% / 3 * 2 + 22% * 2) 可简化 */
ul>li:last-child:nth-child(4n - 2) { margin-right: calc(24% / 3 + 44%) }
/* 如果最后一行是3个元素 calc(12% / 3 * 1 + 22% * 1) 可简化 */
ul>li:last-child:nth-child(4n - 1) { margin-right: calc(12% / 3 + 22%) }

5列布局

计算方法:

最后一个元素所处列数剩余空间margin-right
第二列(li:last-child:nth-child(5n - 3))第三个元素宽度+第四个元素宽度+第五个元素宽度+剩余间隙($space / 4) * 3 + $width * 3
第三列(li:last-child:nth-child(5n - 2))第四个元素宽度+第五个元素宽度+剩余间隙($space / 4) * 2 + $width * 2
第四列(li:last-child:nth-child(5n - 1))第五个元素宽度+剩余间隙($space / 4) * 1 + $width * 1

code

/* 五列布局,li宽度为18%,则剩余间隙:100% - 18% * 5 = 10% */

/* 如果最后一行是2个元素 calc(10% / 4 * 3 + 18% * 2) 可简化 */
ul>li:last-child:nth-child(5n - 3) { margin-right: calc(30% / 4 + 54%) }
/* 如果最后一行是3个元素 calc(10% / 4 * 2 + 18% * 2) 可简化 */
ul>li:last-child:nth-child(5n - 2) { margin-right: calc(20% / 4 + 36%) }
/* 如果最后一行是4个元素 */
ul>li:last-child:nth-child(5n - 1) { margin-right: calc(10% / 4 + 18%) }

依次类推,当列数为6、7、8 …时,同样按照上述方式计算

flex布局其余知识了解

1. 部分元素被挤压的解决方法 flex-shrink: 0

概念:父元素宽度小于子元素宽度之和时,子元素如何缩小自己的宽度
取值:默认为1,值越大,缩小的越多;值为0,不缩小

2. 父元素剩余空间分配问题 flex-grow:1

概念:父元素宽度大于子元素宽度之和时,子元素如何分配父元素剩余空间
取值:默认为0,即使存在剩余空间,也不放大;为其他值时(Number),按照比例放大

转载请注明出处或者链接地址:https://www.qianduange.cn//article/773.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!