Question

我有一个显示flex的列表：

<ul>
    <li></li>
    ....

ul{
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  background: gold;
}

li{
    flex-basis: 25%;
    background:grey;
 }

现在我想在我的li元素之间留一些空格，添加边距或填充将元素推到下一行（当我有超过4个元素时，我想要flex wrap）。

我知道上面的内容可以通过框大小来解决，但我的主要问题是我想要元素之间的间距，但是第一个和最后一个元素要排列在父元素的左侧和右侧。

如何实现这一目标？

例如

|li|spacing|li|spacing|li|spacing|li|

Answer 1

选中此项 - 我使用calc调整flex-basis以允许您为margin分配的自定义ul（已使用justify-content: space-between分配保证金）。

＆＃13;

ul {
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background: gold;
  margin: 10px;
  padding: 0;
  height: 100px;
}
li {
  flex-basis: calc(25% - 20px);
  background: grey;
}

＆＃13;

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

＆＃13;

让我知道您对此的反馈。谢谢！

Answer 2

一个简单得多的解决方案（在通用用例中）：

假设您有以下两个元素：

您可以使用以下CSS来获得元素之间的相同间距。

示例：

.elem1 {
    display: flex;
    flex-wrap: wrap;
    margin-left: 8px;
    margin-top: 8px;
}

.elem2 {
    margin-right: 8px;
    margin-bottom: 8px;
}

    <div class="elem1">
        <div class="elem2">1</div>
        <div class="elem2">2</div>
        <div class="elem2">3</div>
        <div class="elem2">4</div>
    </div>

这将在外边界以及元素之间（沿x或y方向）获得相同的间距，而无需进行任何额外的计算。尽管justify-content: space-between或justify-content: space-around可以起到类似的作用，但它也会使所有内容居中。

反应示例（带有Material UI）

render() {
    return (
        <Box display="flex" flexWrap="wrap" ml={1} mt={1} >
            {this.service.items().map(element =>
                <Box key={element.id} mr={1} mb={1} >
                    <Card entity={element} />
                </Box>
            )}
        </Box>
    )
}

Answer 3

您需要了解设置var dictionary = list.Select((value, index) => (value, index)) .ToDictionary(pair => pair.index, pair => pair.value);到25％会让您“关于”每行三项，具体取决于项目长度和显示尺寸。这是因为您没有计算百分比添加的空间。

减少百分比，然后添加左边填充，它可以正常工作。

flex-basis: 25%;

柔性元件之间的间距？

3 个答案: