设置弹性盒图像之间距离的更好方法答案

【问题标题】：Better way to set distance between flexbox images设置弹性盒图像之间距离的更好方法
【发布时间】：2017-06-29 18:25:23
【问题描述】：

虽然我已经使用 bootstrap 轻松解决了这个问题，但我希望习惯 flex-box 模型和 html 5。我有 3 张图像仅在一行中显示（不换行），图像之间有空格。下面是我的html：

<article>
  <figure>
    <picture>
      <img src="images_srcset/desert-dolphin-medium.jpg"  alt="Dolphin art">
    </picture>
    <figcaption>DESERT-BOTTLE-DOLPHIN</figcaption>      
  </figure>     

  <figure>
    <picture>
      <img src="images_srcset/abc-dolphin-medium.jpg" alt="a-b-c-dolphin">      
    </picture>
    <figcaption>A-B-C-DOLPHIN</figcaption>      
    </figure>       

    <figure>
      <picture>
        <img src="images_srcset/delfin-bananas-medium.jpg" alt="Banana art">
      </picture>
      <figcaption>BANANA-DELPHIN</figcaption>         
    </figure>
</article>

我已经使用了我在“设置弹性框项目之间距离的更好方法”问题下阅读的所有方法。没有人为上述工作。我上次尝试的 CSS 是：

article {
  width: 100vw;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

article > figure {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 32vw;
  margin-right: 1.333vw;
}

请问我做错了什么？

【问题讨论】：

标签： html css flexbox

【解决方案1】：

删除这个：margin-right: 1.333vw;。在数字之间设置良好的相等边距就足够了：

article{ justify-content: space-between;}

这会设置边距。如果您需要在数字的开头和结尾之前有一个小的边距，您可以设置：

article{ justify-content: space-around;}

【讨论】：

【解决方案2】：

感谢您的建议。你也缺少一点。我搜索了 Udacity FEND 课程论坛，这是我得到的最终工作参考：https://discussions.udacity.com/t/must-read-for-using-flexbox/198498（现在我不知道这是否向公众开放）。标题是“使用 flexbox 必读”。本质上它说： Flexbox 仅适用于 DIRECT 子组件。孙子和所有其他后代组件将被忽略，除非每个都被定义为显示：flex 因此我的新代码是： HTML：

<article class="article">       
        <figure class="article-figure">
            <picture class="article-picture">
                <img src="images_srcset/desert-dolphin-large.jpg" alt="Bottled dolphin in the desert">      
            </picture>
            <figcaption class="figcaption">BOTTLE-DOLPHIN</figcaption>
        </figure>       

        <figure class="article-figure">
            <picture class="article-picture">
                <img src="images_srcset/abc-dolphin-large.jpg" alt="a-b-c-dolphin">     
            </picture>
            <figcaption class="figcaption">A-B-C-DOLPHIN</figcaption>
        </figure>       

        <figure class="article-figure">
            <picture class="article-picture">
                <img src="images_srcset/delfin-bananas-large.jpg" alt="Dolphin shaped Bananas in glass-cup">
            </picture>
            <figcaption class="figcaption">BANANA-DELPHIN</figcaption>              
        </figure>           
    </article>

CSS：

.article {
  width: 100vw;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.article-figure {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 30vw;
}

.article-picture {
  display: flex;
  width: 30vw;
  height: 50vh; 
}

注意 display: flex;出现在父级和所有子级中

【讨论】：