更好的方法來設置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圖像之間的距離

回答

相關問題