Question

虽然我已经使用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>

我已经使用了我在“设置flexbox项目之间的距离的更好方法”这一问题下阅读的所有方法。没有人为上述工作。我上次尝试过的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;
}

请问我做错了什么？

Answer 1

删除此内容：margin-right: 1.333vw;。这足以在数字之间设置良好的相等边距：

article{ justify-content: space-between;}

设置边距。如果您在第一个数字之前和结束之后需要一个小的余量，您可以设置：

article{ justify-content: space-around;}

Answer 2

感谢您的建议。你也有一点缺失。我搜索了Udacity FEND课程论坛，这里是我得到的最终作品参考：https://discussions.udacity.com/t/must-read-for-using-flexbox/198498（现在我不知道这是否向公众开放）。标题是“必须阅读使用flexbox”。基本上它说： Flexbox仅适用于DIRECT子组件。除非将每个组件定义为display：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;出现在父级和所有后代

中

设置flexbox图像之间距离的更好方法

2 个答案: