twitter-bootstrap - 将第一个和最后一个 flex 元素分别左对齐和右对齐

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

如何让第五张图片右对齐，以便所有占用的空间都在 flexbox 的中间。

我试过 space-between，但这会在最左边的图像上创建一个左边距，并在最右边的图像上创建一个右边框。

我希望第一张图片左对齐，最后一张图片右对齐，中间有空格，或者让图片增长以填充空格。

Booply Here

Answer 1

bootstrap 中的

Element .row 在默认的 bootstrap css 中添加了一些伪元素，这将使您的 flex 崩溃。您所要做的就是添加:

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

然后为 div.banner.row.images div 删除 flex: 1 1 auto 并添加 justify-content: space-between到div.banner.row.images。图像将在没有默认容器填充的情况下左右对齐。如果您想要此填充，只需删除 .banner 元素的类 row。