flex布局 justify-content:space-between; 解决最后一排数量不够自动向两端排列问题,附录grid栅格布局完美解决

flex 布局两端对齐当最后一排数量不够时,会出现以下布局情况

  • 原图
    在这里插入图片描述
  • 实现效果
    在这里插入图片描述

方案1:父级添加after伪类法,解决最后一排数量不够两端分布的情况

  • html
<div class="tem-flex">
  <div class="tem-list" v-for="item in len">列表</div>
</div>
  • js
data(){
	return {
		len : 14
	}
}
  • css
.tem-flex{
    display: flex;
    flex-wrap: wrap;
    justify-content:space-between;
    text-align: justify;
  }
  <!--加上after伪类,解决最后一排数量不够两端分布的情况-->
  .tem-flex:after{
    content: '';
    width: 30%;
    border:1px solid transparent;
  }
  .tem-list{
    width:30%;
    border:1px solid #ff6600;
    margin-bottom: 10px;
  }

完美解决两端对齐布局混乱的情况

当然,这种解决方案只适合每列有3个的分布情况,如果布局每列有4个,5个,可参考方案2

方案2:补位添加节点法,这种方案适用于多种排列方式。

  • 原图
    在这里插入图片描述
  • 实现效果
    在这里插入图片描述
  • html
<div class="tem-flex">
  <div class="tem-list" v-for="item in len">列表</div>
  <div class="list" v-for="item in (row-len%row)" v-if="len%row > 0"></div>
</div>
  • js
data(){
	return {
		len : 14,
		row: 4
	}
}
  • css
.tem-flex{
  display: flex;
  flex-wrap: wrap;
  justify-content:space-between;
  justify-items: center;
  text-align: justify;
}
.list{
  content: '';
  width: 20%;
  border:1px solid transparent;
  padding: 5px;
  overflow: hidden;
}
.tem-list{
  width:20%;
  border:1px solid #ff6600;
  margin-bottom: 10px;
  padding: 10px 5px;
  display: flex;
  justify-content: center;
}

这里的 row 即是每列元素的个数,4列,5列。。。更改这个值即可

方案3:使用grid栅格布局,完美解决多列排版问题。(个人推荐使用这种方法,简单高效)

  • html
<div class="grid" :style="{
      'grid-template-columns': `repeat(${columns},1fr)`
    }">
      <div class="list" v-for="(item, index) in len" :key="index">列表</div>
    </div>
  • js
data(){
	return {
		len : 14,
		columns: 3
	}
}
  • css
.grid{
    display: grid;
    grid-gap: 10px;
    .list{
      border:1px solid #ff6600;
      padding: 5px;
    }
  }
  • 三列效果
    在这里插入图片描述
  • 四列效果
    在这里插入图片描述
    是不是代码简洁了很多,具体相关知识请翻阅 grid 栅格布局

更多详细知识介绍请访问我的个人主页

### 使用CSS Flexbox实现`justify-content: space-between`和`align-items: center` 在CSS Flexbox布局中,可以通过设置容器的`display: flex`以及相应的对齐属性来控制子项的位置。以下是具体实现方法: #### 容器样式 为了使子项沿主轴均匀分布并让它们在交叉轴上居中对齐,可以定义如下样式: ```css .container { display: flex; /* 启用Flexbox布局 */ flex-direction: row; /* 主轴方向为水平 (默认值) */ justify-content: space-between; /* 子项沿主轴两端对齐,中间留有相等间距 */ align-items: center; /* 子项在交叉轴中心对齐 */ } ``` 此代码片段中的`justify-content: space-between`会将子项分布在容器的起始端和结束端之间[^2]。 对于垂直排列的情况(即主轴为纵向),只需调整`flex-direction`为`column`即可: ```css .container-vertical { display: flex; flex-direction: column; /* 主轴方向改为竖直 */ justify-content: space-between; /* 子项沿纵轴两端对齐 */ align-items: center; /* 子项横向上居中对齐 */ } ``` #### 实现效果分析 当设置了`justify-content: space-between`时,如果希望模拟`space-evenly`的行为,则可以在首尾添加伪元素作为辅助节点[^2]。通过这种方式,即使原生未支持某些特定行为,也可以借助额外标记达成目标。 另外需要注意的是,在实际开发过程中可能会遇到不同浏览器间渲染差异等问题;因此建议测试多种环境下的表现情况,并考虑加入必要的兼容性处理措施。 ```css /* 利用伪类实现更均衡的空间分配 */ .container-space-evenly::before, .container-space-evenly::after { content: ''; display: block; width: 0; /* 不占用视觉上的宽度 */ } .container-space-evenly { display: flex; justify-content: space-between; } ``` #### 垂直与水平双向居中的例子 下面展示了一个简单的案例,其中`.centered-item`会在其父级`.parent-container`内部既上下又左右都处于正中央位置[^3]: ```html <div class="parent-container"> <div class="centered-item"></div> </div> <style> .parent-container{ display:flex; width:500px; height:300px; background-color:green; } .centered-item{ width:100px; height:100px; background-color:red; border:1px solid #cccccc; margin:auto;/* 自动计算外边距从而达到居中的目的 */ } </style> ```
评论 24
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值