89

我对 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/

如何将最后一行/行与左侧对齐？

4

7 回答 7

122

知道了。（我认为）（这是我在这里的第一个贡献！）

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

像这样使用“filling-empty-space-childs”类在 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 容器有 display:flex / flex-wrap:wrap; / 对齐内容：空间环绕

最后一行可以有 4、3、2、1 个图像。 4 张图片：没问题，这三个 div 将折叠成新的一行，因为它们没有高度。 3 张图片：没问题，一个 div 将在同一行，不可见，另外两个将换行到新行，但由于它们没有高度而将折叠。 2 个图像：没问题，两个 div 将在同一行，不可见，其余的...折叠 1 个图像：没问题，三个 div 将填充空间。

于 2015-07-17T14:19:07.500 回答
50

不幸的是，这对于 flexbox 是不可能的。

最好的解决方法是在最后一行添加隐形孩子“填充”空“块”。这样，实际可见的元素左对齐。

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

于 2014-10-22T09:55:15.270 回答
22

您可以margin-right:auto在最后一个子弹性项目上使用。

这里的问题是您将丢失此弹性项目左侧的 space-between 属性。

希望能帮助到你！

于 2015-10-09T12:43:45.797 回答
8

我认为这个示例可能对任何想要多个项目并允许响应的人有用，网格项目根据视口大小而变化。它不使用任何看不见的孩子，这一切都是通过 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;
  }
}
于 2015-06-25T11:37:36.717 回答
2

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

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>
于 2014-05-27T08:35:53.560 回答
-2

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

脚本应该是这样的

CSS 部分

.container {
显示：弹性；
显示：-webkit-flex；
显示：-moz-flex；
justify-content：空间环绕；
-webkit-justify-content：空间环绕；
-moz-justify-content：空间环绕；
flex-flow：换行；
-webkit-flex-flow：换行；
-moz-flex-flow：换行；
}

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


在此处输入图像描述

于 2014-02-25T15:46:02.157 回答
-2

您可以将 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%;
}

和 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>

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

于 2015-05-23T10:43:11.473 回答