如何对齐多行柔性盒中的最后一行/最后一行

Question

我有一个柔性盒布局的主要问题。我建立与充满图像的盒容器，我决定用Flexbox的布局来证明的内容，使它看起来像一个网格

她是代码：

<div class="container"> 

    <div class="item"></div> 
    <div class="item"></div> 
    ... 
    <div class="item"></div> 

</div> 

和CSS：

.container { 
    display: flex; 
    display: -webkit-flex; 
    display: -moz-flex; 
    justify-content: space-around; 
    -webkit-justify-content: space-around; 
    -moz-justify-content: space-around; 
    flex-flow: row wrap; 
    -webkit-flex-flow: row wrap; 
    -moz-flex-flow: row wrap; 
} 

.container .item { width: 130px; height: 180px; background: red; margin: 0 1% 24px; } 

除了最后一行/行，一切看起来都不错 - 当它不包含与其他行相同数量的元素时，居中元素和它打破了我的网格效果。

http://jsfiddle.net/puz219/7Hq2E/

如何对齐最后一行/列到左侧？

Answer 1

您没有指定它是否需要100％响应，但类似这种技术的工作。每行

使用一个容器中，用最小宽度限制它，还添加隐藏要素进行计算工作：

HTML

<div class="container"> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 

</div> 
<div class="container"> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 

</div> 
<div class="container"> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item empty"></div> 
    <div class="item empty"></div> 

</div> 

CSS

.container { 
    display: flex; 
    display: -webkit-flex; 
    display: -moz-flex; 
    justify-content: space-around; 
    -webkit-justify-content: space-around; 
    -moz-justify-content: space-around; 
    flex-flow: row wrap; 
    -webkit-flex-flow: row wrap; 
    -moz-flex-flow: row wrap; 
    min-width:580px; 
    background:rgba(00,00,00,0.5); 
} 
.container .item { width: 130px; height: 180px; background: #000; margin: 0 1% 24px; } 

.container .item.empty{opacity:0;} 

Here is the example。

Answer 2

我检查了它，它在我的HTML编辑器工具更好地工作

脚本应该是这样

CSS部分

.container {
显示：柔性;
display：-webkit-flex;
display：-moz-flex;
justify-content：space-around;
-webkit-justify-content：space-around;
-moz-justify-content：space-around;
flex-flow：row wrap;
-webkit-flex-flow：换行;
-moz-flex-flow：换行;
}

。容器。item {width：130px; height：180px;背景：绿色; margin：0 1％24px; }

HTML部分

<div class="container"> 

    <div class="item"><a href='google.com'>Google</a></div> 
    <div class="item"><a href='google.com'>Yahoo</a></div> 
    <div class="item"><a href='google.com'>Bing</a></div> 
</div> 

<div class="container"> 
    <div class="item"><a href='google.com'>Google</a></div> 
    <div class="item"><a href='google.com'>Yahoo</a></div> 
    <div class="item"><a href='google.com'>Bing</a></div> 

</div> 

Answer 3

这是不是你想要达到的效果？

http://jsfiddle.net/7Hq2E/21/

CSS：

.container { 
    display: flex; 
    display: -webkit-flex; 
    display: -moz-flex; 
    flex-flow: row wrap; 
    -webkit-flex-flow: row wrap; 
    -moz-flex-flow: row wrap; 
} 
.container .item { 
    width: 23%; 
    height: 180px; 
    background: red; 
    margin: 0 1% 20px; 
} 

HTML：

<div class="container"> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
</div> 

Answer 4

可惜，这是不可能的Flexbox的。

最好的解决方法是在最后一行添加隐形儿童'填满'空'块'。这样，实际的，可见的元素左对齐。

类似的问题： Flex-box: Align last row to grid

Answer 5

您可以使用Flexbox的与max-width（供应商前缀去掉）：

.container { 
    display: flex; 
    width: 100%; 
    justify-content: space-around; 
    flex-direction: row; 
    flex-wrap: wrap; 
} 

.column { 
    flex: 1 0 33.333%; 
    max-width: 33.333%; 
} 

而且在CodePen的HTML

<div class="container"> 
    <div class="column">1</div> 
    <div class="column">2</div> 
    <div class="column">3</div> 
    <div class="column">4</div> 
</div> 

查看：http://codepen.io/anon/pen/gpwEJW

Answer 6

我th对于想要多个项目并允许响应的人来说，这个例子可能会很有用，网格项目根据视口的大小而变化。它不使用任何看不见的孩子，这一切都是通过CSS完成的。

当最后一行的项目较少并且需要页面响应时，可能会帮助有人尝试将项目对齐到左侧。

http://codepen.io/kunji/pen/yNPVVb

样本HTML

<div class="main-container"> 

    <div class="main-items-container"> 

     <div class="item-container"> 
      <h2>Item Name</h2> 
     </div> 

     <div class="item-container"> 
      <h2>Item Name</h2> 
     </div> 

     <div class="item-container"> 
      <h2>Item Name</h2> 
     </div> 

     <div class="item-container"> 
      <h2>Item Name</h2> 
     </div> 

     <div class="item-container"> 
      <h2>Item Name</h2> 
     </div> 

     <div class="item-container"> 
      <h2>Item Name</h2> 
     </div> 

    </div> 

</div> 

样品CSS

.main-container { 
    max-width: 1000px; 
    min-width: 300px; 
    margin: 0 auto; 
    padding: 40px; 
    box-sizing: border-box; 
    border: 1px solid #000; 
} 

.main-items-container { 
    display: -ms-flexbox; 
    display: flexbox; 
    display: -webkit-flex; 
    display: -ms-flex; 
    display: flex; 
    padding: 0; 
    margin: 10px 0; 
    list-style: none; 
    width: auto; 
    -webkit-flex-flow: row wrap; 
    justify-content: flex-start; 
    -webkit-flex-wrap: wrap; 
    flex-wrap: wrap; 
    -webkit-align-items: stretch; 
    align-items: stretch; 
    box-sizing: border-box; 
} 

@media (min-width: 971px) { 
    .item-container { 
    margin: 10px 2%; 
    width: 22%; 
    padding: 10px; 
    border: 1px solid #000; 
    box-sizing: border-box; 
    } 
    .item-container:nth-child(4n+1) { 
    margin-left: 0; 
    } 
    .item-container:nth-child(4n) { 
    margin-right: 0; 
    } 
} 

@media (min-width: 550px) and (max-width: 970px) { 
    .item-container { 
    margin: 10px 2.50%; 
    width: 30%; 
    padding: 10px; 
    border: 1px solid #000; 
    box-sizing: border-box; 
    } 
    .item-container:nth-child(3n+1) { 
    margin-left: 0; 
    } 
    .item-container:nth-child(3n) { 
    margin-right: 0; 
    } 
} 

@media (max-width: 549px) { 
    .item-container { 
    margin: 10px 0; 
    width: initial; 
    padding: 10px; 
    border: 1px solid #000; 
    box-sizing: border-box; 
    } 
} 

Answer 7

明白了。 （我认为）（这是我的第一个贡献！）

想象一下每行需要有4个图像的布局。 w：205 h：174 问题：使用justify-content：space-around，如果最后一行没有4个图像（有3个，2个或1个），他们不会尊重网格，它们会传播。 所以。

在HTML创建3周的div类“填充空空间，孩子的”这个样子。

.filling-empty-space-childs { 
    width:205px; /*the width of the images in this example*/ 
    height:0; /*Important! for the divs to collapse should they fall in a new row*/ 
} 

的Flexbox的容器具有显示：弯曲/挠性包装：包装; /证明含量：空间周围

最后行可具有4个，3，2，1图像。 4图片：没问题，这三个divs会崩溃在一个新的行，因为他们没有高度。 3图像：没问题，一个div将在同一行中，看不见，另外两个会换到一个新行，但会因为没有高度而折叠。 2图像：没问题，两个div将会在同一行，看不见，其余...倒塌 1图像：没问题，三个div都要填入空格。

Answer 8

您可以在最后Flex子项使用margin-right:auto。

这里的问题是，您将失去此Flex项左侧的属性之间的空间。

希望它有帮助！