当它们以未知宽度包装时如何指定弹性项目？ [复制]答案

【问题标题】：how to specify flex item when they wrap in unknown width? [duplicate]当它们以未知宽度包装时如何指定弹性项目？ [复制]
【发布时间】：2019-03-23 02:08:21
【问题描述】：

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

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

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

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

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

【问题讨论】：

只需将 margin-bottom 添加到第一个元素
你是指哪个边距/填充？顶部、底部、垂直、水平、...？
可以是margin-top或者margin-bottom

标签： html css flexbox

【解决方案1】：

简单地将margin-bottom添加到父块；

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

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

【讨论】：

【解决方案2】：

只需将 margin-bottom 设置为您需要的空间量：

.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>

【讨论】：