gpt4 book ai didi

html - 如何使用 wrap 将 Flex 列表容器居中并对齐 flex-start 元素

转载 作者:搜寻专家 更新时间:2023-10-31 22:39:47 26 4
gpt4 key购买 nike

<分区>

我在实现 Flex-box 时遇到了一些问题,在我对 View 的要求中,我有一个卡片列表,每张卡片都有默认的宽度和高度。我可以使用 flex box,而且我更喜欢它。当列表的元素不适合行时,它们应该换成一个新元素,始终从左到右,并且所有列表都在容器的可用空间中居中。

这里是 a plunker布局和代码:

.list {
display: flex;
flex-grow: 0;
flex-shrink: 1;
flex-direction: row;
justify-content: flex-start;
flex-wrap: wrap;
}
.item {
width: 200px;
height: 300px;
border: 1px solid black;
background-color: #e6e6e6;
margin: 12px;
}
<body>
<div class="list">
<div class="item">someItem01</div>
<div class="item">someItem02</div>
<div class="item">someItem03</div>
<div class="item">someItem04</div>
<div class="item">someItem05</div>
</div>
</body>

这就是我想要实现的目标: enter image description here

这就是我目前拥有的: enter image description here

如何在不重复使用大量媒体查询、硬编码边距/填充等的情况下实现这一目标?

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