css问题：display:flex布局+justify-content: space-between；最后一行不能左对齐

我家媳妇儿萌哒哒

已于 2024-09-05 15:25:13 修改

阅读量1.2k

点赞数 5

分类专栏： css 文章标签： css 前端 html

于 2024-09-05 15:24:20 首次发布

本文链接：https://blog.csdn.net/qq_44146522/article/details/141932050

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

解决方法1： display: flex;+margin: 10px var(--leftRight);

--leftRight：动态计算一行减去item的宽度后剩下的间距

解决方法2：网格布局 display: grid;grid-template-columns: repeat(5, 1fr);+margin: 10px auto;

完整代码：

<template>

<div class="flex">

<h1>问题：flex布局+justify-content: space-between; 最后一行不能左对齐</h1>

<div class="box">

<div class="box_item" v-for="(v, i) in list" :key="i"></div>

</div>

<h1>方法1：display: flex;+margin: 10px var(--leftRight);</h1>

<div class="box1">

<div class="box1_item" v-for="(v, i) in list" :key="i"></div>

</div>

<h1>方法2：网格布局 display: grid;grid-template-columns: repeat(5, 1fr);+margin: 10px auto;</h1>

<div class="box2">

<div class="box2_item" v-for="(v, i) in list" :key="i"></div>

</div>

</div>

</template>

<script>

export default {

data () {

return {

list: 12

}

},

mounted () { },

methods: {},

}

</script>

<style lang="scss" scoped>

.flex {

width: 100%;

height: calc(100vh - 90px);

padding: 5px;

h1 {

padding-left: 10px;

}

.box {

display: flex;

justify-content: space-between;

flex-wrap: wrap;

width: 100%;

padding-top: 20px;

.box_item {

width: 50px;

height: 50px;

background-color: blue;

border: solid 1px #000;

box-sizing: border-box;

--n: 5;

/* 一行几个 */

--space: calc(100% - var(--n) * 50px);

/* 一行减去item的宽度后剩下的间距 */

--leftRight: calc(var(--space) / var(--n) / 2);

/* 每个item左右的间距 */

margin: 10px var(--leftRight);

}

}

.box1 {

display: flex;

flex-wrap: wrap;

width: 100%;

padding-top: 20px;

.box1_item {

width: 50px;

height: 50px;

background-color: blue;

border: solid 1px #000;

box-sizing: border-box;

--n: 5;

/* 一行几个 */

--space: calc(100% - var(--n) * 50px);

/* 一行减去item的宽度后剩下的间距 */

--leftRight: calc(var(--space) / var(--n) / 2);

/* 每个item左右的间距 */

margin: 10px var(--leftRight);

}

}

.box2 {

display: grid;

grid-template-columns: repeat(5, 1fr);

width: 100%;

padding-top: 20px;

.box2_item {

width: 50px;

height: 50px;

background-color: blue;

border: solid 1px #000;

box-sizing: border-box;

margin: 10px auto;

}

}

}</style>