关于twitter bootstrap:将第一个和最后一个flex项目分别对齐到左侧和右侧

aligning the first and last flex items to the left and right respectively

给出以下HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
        <img src="http://www.3tonus.com/2014/images/gallery/tower/thumbs/finalfull.jpg" />
     
     
        <img src="http://www.3tonus.com/2014/images/gallery/tower/thumbs/finalfull.jpg" />
               
     
        <img src="http://www.3tonus.com/2014/images/gallery/tower/thumbs/finalfull.jpg" />
     
     
        <img src="http://www.3tonus.com/2014/images/gallery/tower/thumbs/finalfull.jpg" />
     
     
        <img src="http://www.3tonus.com/2014/images/gallery/tower/thumbs/finalfull.jpg" />

和css

1
2
3
4
5
6
7
div.banner.row.images {
    display: flex;
    flex-wrap: wrap;
}
div.banner.row.images div {
        flex: 1 1 auto;
}

如何使第五张图像正确对齐,以使所有占用的空间都位于柔韧性框的中间。

我尝试了space-between,但是这在最左边的图像上创建了左边距,并在最右边的图像上创建了右边框。

我要使第一张图像左对齐,最后一张图像右对齐,并在它们之间留出空间,或者只是让图像增长以填充该空间。

只在这里


引导程序中的

元素.row在默认的引导程序css中添加了一些伪元素,这些伪元素会使该元素的flex崩溃。您所要做的就是添加:

1
2
3
4
div.banner.row.images::before,
div.banner.row.images::after {
    content:none;
}

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