CSS 如何在多行 flexbox 中左对齐最后一行/行

Question

提问by PuZ

I have a major issue with flexbox layout. I build a container with a boxes filled with images, and i decided to use flexbox layout to justify the content to make it looks like a grid

我有一个 flexbox 布局的主要问题。我用一个装满图像的盒子构建了一个容器，我决定使用 flexbox 布局来证明内容的合理性，使其看起来像一个网格

Her's the code:

她的代码：

<div class="container">

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

</div>

and the CSS:

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

And everything looks good except the last line/row - when it not contain the same number of element that other lines, centering elements and it broke my grid effect.

除了最后一行/行之外，一切看起来都很好 - 当它包含的元素数量与其他行不同时，居中元素并破坏了我的网格效果。

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

How to align last line/row to left side?

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

Answer 1

回答by La Nube - Luis R. Díaz Mu?iz

Got it. (I think)(this is my first contribution here!)

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

Imagine a layout which needs to have 4 images per row. w:205 h:174 Problem: Using justify-content:space-around, if the last row doesn′t have 4 images (has 3, 2 or 1), they would not respect the grid, they would spread. So.

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

Create in the html 3 divs with the class "filling-empty-space-childs" like this.

像这样在 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*/
}

The flexbox container has display:flex / flex-wrap:wrap; / justify-content:space-around

flexbox 容器有 display:flex / flex-wrap:wrap; / justify-content:space-around

The last row can have 4, 3, 2, 1 images.4 images:no problem, this three divs would collapse in a new row since they have no height. 3 images:no problem, one div is going to be in the same row, invisible, and the other two would wrap to a new row, but will collapse since they have no height. 2 images:no problem, two divs are going to be in the same row, invisibles, the rest... collapsed 1 image:no problem, the three divs are going to fill in the space.

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

Answer 2

回答by sandstrom

Unfortunately this is not possible with flexbox.

不幸的是，这在 flexbox 中是不可能的。

The best work-around is to add invisible children 'filling up' the empty 'blocks' in the last row. That way, the actual, visible, element is aligned left.

最好的解决方法是添加不可见的子项，以“填充”最后一行中的空“块”。这样，实际的、可见的元素就向左对齐。

Similar question: Flex-box: Align last row to grid

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

Answer 3

回答by bzin

You can use margin-right:autoon the last-child flex item.

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

The problem here is that you will lose the space-between property on the left for this flex item.

这里的问题是你将失去这个 flex 项目左侧的 space-between 属性。

Hope it helps!

希望能帮助到你！

Answer 4

回答by Kunji

I thought this example might be useful for anyone who wanted multiple items and allow for responsiveness, the grid items change depending on the viewport size. It does not use any invisible children, it's all done through css.

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

Might help someone trying align items to the left when the last row has less items and they require the page to be responsive.

当最后一行的项目较少并且他们要求页面具有响应性时，可能会帮助某人尝试将项目与左侧对齐。

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

Sample HTML

示例 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>

Sample CSS

示例 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

回答by Joná? Krutil

This is not an effect you wanted to achieve?

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

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

CSS:

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:

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

回答by Ignacio Correia

You didn't specify if it needs to be 100% responsive, but something like this technique works.

您没有指定它是否需要 100% 响应，但类似这种技术的方法是有效的。

Use one container per row and limit it with min-width, also add hidden elements to make the calculation work:

每行使用一个容器并用 min-width 限制它，同时添加隐藏元素以使计算工作：

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

回答by Ahmed Wild

I've checked it and it worked better in my HTML editor tool

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

the script should be the way

脚本应该是方式

CSS Part

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: green; margin: 0 1% 24px; }

.container {
display: flex;
显示：-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 Part

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

在此处输入图片说明

Answer 8

回答by bashaus

You can use flexbox with max-width(vendor prefixes removed):

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

And the HTML

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

View on CodePen: http://codepen.io/anon/pen/gpwEJW

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

CSS 如何在多行 flexbox 中左对齐最后一行/行

提问by PuZ

回答by La Nube - Luis R. Díaz Mu?iz

回答by sandstrom

回答by bzin

回答by Kunji

回答by Joná? Krutil

回答by Ignacio Correia

回答by Ahmed Wild

回答by bashaus

相关推荐

最近更新

标签

CSS 如何在多行 flexbox 中左对齐最后一行/行

提问by PuZ

回答by La Nube - Luis R. Díaz Mu?iz

回答by sandstrom

回答by bzin

回答by Kunji

回答by Joná? Krutil

回答by Ignacio Correia

回答by Ahmed Wild

回答by bashaus

相关推荐

CSS 如何在浏览器的右下角定位一个div？

CSS 绝对位置比固定位置具有更大的 z-index

使用 CSS 匹配空输入框

CSS 如何在 Twitter Bootstrap 中垂直对齐进度条？

相关推荐

最近更新

标签