gpt4 book ai didi

html - 行为之间的 Flexbox 空间与换行相结合

转载 作者:太空狗 更新时间:2023-10-29 13:45:13 30 4
gpt4 key购买 nike

<分区>

我正在使用 flexbox 创建一个漂亮的 tiles 网格,当 tiles 不适合一行时,它会自动换行。

我使用 justify-content: space-between 这样瓦片就粘在父容器的左右两边,任何剩余的空间只分布在“中间”而不是左边和右边。

任何其他 justify 选项也会在外部两个 flex 元素的左侧和右侧放置空间。

问题是,当某行的图 block 数量与前一行的图 block 数量不同时,我希望最后一行的图 block 向左对齐。这可以仅使用 flex 属性来完成吗?

当前结果:

▀ ▀ ▀
▀ ▀

期望的结果:

▀ ▀ ▀
▀ ▀

HTML

<div class="browser">
<div @click='projectClicked' class="case">
<h3>Project</h3>
</div>

<div @click='projectClicked' class="case">
<h3>Project</h3>
</div>

<div @click='projectClicked' class="case">
<h3>Project</h3>
</div>

<div @click='projectClicked' class="case">
<h3>Project</h3>
</div>

<div @click='projectClicked' class="case">
<h3>Project</h3>
</div>
</div>

CSS

.browser {
width: 700px;
display:flex;
justify-content: space-between;
padding-bottom:100px;
flex-wrap:wrap;
border:1px solid red;
}
.case {
flex: 0 0 200px;
background-color:#ccc;
height:100px;
border:1px solid blue;
margin-bottom:10px;
}

Codepen

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com