当它们以未知宽度包装时如何指定弹性项目？

Question

我有一个有两个孩子的容器。我设置flex-wrap属性和值包装。在小型设备中，当它们折断未知宽度时，如何设置两个项目之间的边距/填充？

https://jsfiddle.net/irojabkhan/w1x5phya/4/

df = df.apply(lambda x: x.duplicated()).sum()
print (df)
A    0
B    2
C    3
D    1
dtype: int64

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item {
  background: blue;
  font-size: 46px;
}

Answer 1

只需将空白边距设置为所需的空间量即可：

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item {
  background: blue;
  font-size: 46px;
  margin-bottom: 20px; /* Set this to whatever you want it to be*/
}

.contai<div class="container">
  <div class="item">Hello World</div>
  <div class="item">Keep Learning</div>
</div>

Answer 2

简单地在margin-block中添加了margin-bottom;

`.parent{
    display: flex;
    flex-wrap: wrap;
    margin-top: -30px;
}

.child-1,.child-2{
    margin-top: 30px
}
`