如何在多行flexbox中对齐左末行/行

Question

我有一个关于flexbox布局的主要问题.我建立了一个装有图像的盒子的容器,我决定使用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

得到它了.(我想)(这是我在这里的第一个贡献!)

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

在html 3 div中创建像这样的类"filling-empty-space-childs".

.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容器有display:flex/flex-wrap:wrap;/justify-content:space-around

最后一行可以有4个,3个,2个,1个图像. 4张图片:没问题,这三个div会在新行中崩溃,因为它们没有高度. 3个图像:没问题,一个div将在同一行中,不可见,另外两个将换行到一个新行,但由于它们没有高度会崩溃. 2张图片:没问题,两个div将在同一行,隐形,其余...折叠 1图像:没问题,三个div将填补空间.

Answer 2

不幸的是,这对Flexbox来说是不可能的.

最好的解决方法是在最后一行添加隐形孩子'填补'空'块'.这样,实际的可见元素向左对齐.

类似的问题: Flex-box:将最后一行与网格对齐

Answer 3

您可以margin-right:auto在last-child flex项目上使用.

这里的问题是,您将丢失此Flex项目左侧的空格属性.

希望能帮助到你!

Answer 4

我认为这个例子可能对任何想要多个项目并允许响应的人有用，网格项目根据视口大小而变化。它不使用任何隐形孩子，都是通过 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 5

我已经检查过了，它在我的 HTML 编辑器工具中运行得更好

脚本应该是这样的

CSS部分

.container {
显示：flex;
显示：-webkit-flex；
显示：-moz-flex；
justify-content：空间周围；
-webkit-justify-content：周围空间；
-moz-justify-content：周围空间；
flex-flow：行换行；
-webkit-flex-flow：行换行；
-moz-flex-flow：行换行；
}

.container .item { 宽度：130px; 高度：180像素；背景：绿色；边距：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>