對齊第一和最後一個彎曲項目到左邊和右邊分別

Question

鑑於以下HTML

<div class="container-fluid body-content"> 
    <div class="banner row images">    
     <div> 
     <img src="http://www.3tonus.com/2014/images/gallery/tower/thumbs/finalfull.jpg" /> 
     </div> 
     <div> 
     <img src="http://www.3tonus.com/2014/images/gallery/tower/thumbs/finalfull.jpg" /> 
     </div>   
     <div> 
     <img src="http://www.3tonus.com/2014/images/gallery/tower/thumbs/finalfull.jpg" /> 
     </div> 
     <div> 
     <img src="http://www.3tonus.com/2014/images/gallery/tower/thumbs/finalfull.jpg" /> 
     </div> 
     <div> 
     <img src="http://www.3tonus.com/2014/images/gallery/tower/thumbs/finalfull.jpg" /> 
     </div> 
    </div> 

和CSS

div.banner.row.images { 
    display: flex; 
    flex-wrap: wrap; 
} 
div.banner.row.images div { 
     flex: 1 1 auto; 
} 

如何獲得第五圖像右對齊，這樣所有佔用的空間都在柔性盒子的中間。

我已經試過space-between，而是創造了最右邊的圖像最左邊圖像上的左邊距和右邊框。

我希望第一個圖像左對齊，最後一個圖像右對齊，和空間之間，或者只是讓圖像擴展至整個空間。

Booply Here

Answer 1

元.row從引導具有一定pseudoelements在缺省引導CSS添加了會崩潰您的Flex這個元素。所有您需要做的就是添加：

div.banner.row.images::before, 
div.banner.row.images::after { 
    content:none; 
} 

，然後刪除flex: 1 1 auto爲div.banner.row.images div並添加justify-content: space-between到div.banner.row.images。 圖像將被對齊左右沒有默認容器填充。如果你想擁有此填充只是刪除row類.banner元素。