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小时：174 问题：使用justify-content：space-around，如果最后一行没有4个图像（有3个，2个或1个），它们就不会尊重网格，它们会传播。如此。

使用类“fill-empty-space-childs”在html 3 div中创建。

use CGI

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: Align last row to grid

Answer 3

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

此处的问题是，您将丢失此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

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

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 6

你没有说明它是否需要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 7

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

Answer 8

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

脚本应该是

的方式

CSS部分

.container {
      显示：flex;
      显示：-webkit-flex;
      显示：-moz-flex;
      辩解内容：空间;左       -webkit-justify-content：space-around;
      -moz-justify-content：space-around;
      flex-flow：row wrap;
      -webkit-flex-flow：行换行;
      -moz-flex-flow：行换行;
}

.container .item {width：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>

enter image description here

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

8 个答案: