css 柔性元件之间的间距？

izkcnapc 于 5个月前发布在其他

关注(0)|答案(3)|浏览(53)

JSFiddle
我有一个用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）。
我知道上面的问题可以通过调整框大小来解决，但我的主要问题是，我希望元素之间有间距，但第一个和最后一个元素要排列到父元素的左侧和右侧。
如何做到这一点？
eg.

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

型

css

来源：https://stackoverflow.com/questions/39386119/spacing-between-flex-elements

3条答案

按热度按时间

9njqaruj1#

看看这个-我使用calc来调整flex-basis，以允许您可以为ul分发自定义margin（使用justify-content: space-between来分发该保证金）。

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;
}

个字符
让我知道你的反馈。谢谢！

赞(0）回复(0）举报 5个月前

2ledvvac2#

由于这是我想添加的第一个Google结果，因此可以使用新的“gap”属性来完成：

ul {
    gap: 8px; 
}

字符串

赞(0）回复(0）举报 5个月前

yacmzcpb3#

一个更简单的解决方案（在通用用例中）：
假设你有如下两个元素：
你可以使用下面的css来获得相同的元素间距。
范例：

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

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

个字符
这样就可以在外部边界以及元素之间（在x或y方向上）实现相同的间距，而无需任何额外的计算。虽然justify-content: space-between或justify-content: space-around可以具有类似的效果，但它也可以使所有内容居中。
React Example（with 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>
    )
}

型

赞(0）回复(0）举报 5个月前

我来回答

css 柔性元件之间的间距？

3条答案

相关问题

热门标签

最新问答