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

来自bootstrap的

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

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

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

将第一个和最后一个弹性项目分别对齐到左侧和右侧

1 个答案: