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

尽管我已经很容易地使用bootstrap解决了这个问题，但我希望习惯flex-box模型和html 5.我有3张图片只显示在一行中（不包装）在图像之间留有空间。下面是我的html：更好的方法来设置flexbox图像之间的距离

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

请问我做错了什么？

来源

2017-02-11 Olu Adabonyan

删除该内容：margin-right: 1.333vw;。在数字之间设置好的相等余量就足够了：

article{ justify-content: space-between;}

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

article{ justify-content: space-around;}

来源

2017-02-11 12:21:39

感谢您的建议。还有一点你也没有想到。我搜索了Udacity FEND课程论坛，这里是我得到的最终作品参考：https://discussions.udacity.com/t/must-read-for-using-flexbox/198498（现在我不知道这是否对公众开放）。标题为“必须阅读使用Flexbox”。基本上它说： Flexbox只与DIRECT子组件一起使用。孙子和其他所有的后续组件会忽略，除非每一个被定义为显示：弯曲因此我的新代码： 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; 
}

注意显示：弯曲;出现在父母和所有后代

来源

2017-02-12 10:14:29

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

回答

相关问题