如何对齐多行Flexbox的左边最后一排/线[复制](How to align left last

2019-09-02 00:11发布

站内文章 / 前沿技术

93 0

一夜七次

女 | 书童

私信

这个问题已经在这里有一个答案：

Flex的框：最后一排对齐网格 24分的答案

我有那么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幅图像的布局。瓦特：205个H：174问题：使用证明含量：空间周围，如果最后一行doesn't具有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个图像：没问题，这三款的div会崩溃在新行，因为他们没有高度。 3个图像：没问题，一个DIV将是在同一行，无形之中，而其余的两个人换到一个新行，但会崩溃，因为他们没有高度。 2张图片：没问题，两个div将是在同一行中，无形，其余...倒塌1个图像：没问题，这三个div的将要填补的空间。

Answer 2:

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

最好的解决办法是到最后一排隐形加子女“填补”空“块”。这样一来，实际的，可见的，元素左对齐。

类似的问题： Flex的框：对齐最后一行网格

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;}

这里是例子。

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部分

。容器 {
显示：弯曲;
显示：-webkit-FLEX;
显示：-moz-FLEX;
证明内容：空间周围;
-webkit-证明内容：空间周围;
-moz-证明内容：空间周围;
柔性流动：行涡卷;
-webkit-FLEX流：行涡卷;
-moz-FLEX流：行涡卷;
}
.container .item {宽度：130px; 高度：180像素; 背景：绿色; 余量：0 1％24像素; }

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>