flex布局设置space-between(around)最后一行不左对齐问题

最新推荐文章于 2024-07-31 12:16:44 发布

前端菜鸡小卒

最新推荐文章于 2024-07-31 12:16:44 发布

阅读量1.1w

点赞数 10

分类专栏： CSS 文章标签： flex布局设置space-between(around)最

本文链接：https://blog.csdn.net/qq_30376375/article/details/93142191

版权

CSS 专栏收录该内容

5 篇文章 2 订阅

订阅专栏

需求：在项目布局上使用弹性布局，要求每个盒子两端要对齐，而且最后一行在列不满的情况下要求左对齐；

遇到问题：

使用flex的设置justify-content为space-between;发现最后一行不能左对齐，而是两端对齐方式导致形成下图1，图2所示的问题

解决办法：俩种

一.添加几个空格子，格子高度为0

根据布局列数添加红格子(指上面的div)，每行最大n列，那么在最后添加n-2个空红格子即可，比如要求每行四列，也就是要求每行4个红格子

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>flex弹性布局</title>
	<style>
		.container {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
		}
		.box {
			width: 400px;
			height: 100px;
			background-color: red;
			margin-bottom: 10px;
		}
		.item-empty {
	        height: 0px;
	        width: 400px;
	      }
	</style>
</head>
<body>
	<div class="container">
		<div class="box">1</div>
		<div class="box">2</div>
		<div class="box">3</div>
		<div class="box">3</div>
		<div class="box">3</div>
		<div class="box">3</div>
		<div class="box">3</div>
		<div class="box">3</div>
		<div class="box">3</div>
		<div class="box">3</div>
		<div class="item-empty"></div>
        <div class="item-empty"></div>
	</div>
</body>
</html>

二.伪元素after

1.当每行为3列时，见代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>flex弹性布局</title>
	<style>
		.container {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
		}
		.container:after{
			content:'';
			/*这个宽度和子元素宽度一致*/
			width: 480px;
			height: 0;
			display: block;
		}
		.box {
			width: 480px;
			height: 100px;
			background-color: red;
			margin-bottom: 10px;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="box">1</div>
		<div class="box">2</div>
		<div class="box">3</div>
		<div class="box">3</div>
		<div class="box">3</div>
		<div class="box">3</div>
		<div class="box">3</div>
		<div class="box">3</div>
		<div class="box">3</div>
		<div class="box">3</div>
		<div class="box">3</div>
	</div>
</body>
</html>

2.当每行为4列时，见代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>flex弹性布局</title>
	<style>
		.container {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
		}
		.container:after {
			content:' ';
    	flex:auto;
		}
		.box {
			width: 400px;
			height: 100px;
			background-color: red;
			margin-bottom: 10px;
		}
		.container .box{
			margin-right:0.55rem;
			width: -webkit-calc((100% - 0.55rem*4)/ 4);
			width: calc((100% - 0.55rem*4)/ 4); 、
			/*//这里用calc动态计算宽度，用于适配不同尺寸的屏幕都是四列，
			  值得注意的是，如果这里有padding，还需要减去padding的值，
			  这里的宽度应该是除去padding和margin之后的*/
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="box">1</div>
		<div class="box">2</div>
		<div class="box">3</div>
		<div class="box">3</div>
		<div class="box">3</div>
		<div class="box">3</div>
		<div class="box">3</div>
		<div class="box">3</div>
		<div class="box">3</div>
		<div class="box">3</div>
		<div class="box">3</div>
	</div>
</body>
</html>

3.不确定列数，见下

 <template>
  <div class="tem-flex">
    <div class="tem-list" v-for="item in len">弹性布局</div>
    <div class="list" v-for="item in (rowNum-len%rowNum)" v-if="len%rowNum > 0"></div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        len : 14,
        rowNum: 4  // rowNum即是每列元素的个数，4列，5列。。。更改这个值即可
      }
    },
  }
</script>
<style scoped>
  .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;
  }
</style>