行为与包装之间的Flexbox空间 [英] Flexbox space between behavior combined with wrap

问题描述

我使用flexbox创建了一个很好的网格图块，当这些图块不适合放在一行上时，它会自动换行。

我使用 justify-content：之间的空格，以便瓷砖粘在父容器的左侧和右侧，并且任何剩余空间仅分布在中间而不分布在左侧和右侧。

任何其他 justify 选项也会将外部空间放在外部两个弹性项目的左侧和右侧。

问题是，如果一行的瓦片数量与前一行不同，我想让最后一行的瓦片对齐左侧。这可以只使用flex属性完成吗？

当前结果：

$ $ $ $ $ $ $ $ $ >▀▀▀
▀▀

预期结果：

 ▀▀▀
▀▀
  

HTML

 < div class =browser> 
< div @ click ='projectClicked'class =case> 
< h3> Project< / h3> 
< / div> 
 
< div @ click ='projectClicked'class =case> 
< h3> Project< / h3> 
< / div> 
 
< div @ click ='projectClicked'class =case> 
< h3> Project< / h3> 
< / div> 
 
< div @ click ='projectClicked'class =case> 
< h3> Project< / h3> 
< / div> 
 
< div @ click ='projectClicked'class =case> 
< h3> Project< / h3> 
< / div> 
< / div> 
  

CSS

  .browser {
 width：700px; 
 display：flex; 
 justify-content：space-between; 
 padding-bottom：100px; 
 flex-wrap：wrap; 
 border：1px纯红色; 
} 
 .case {
 flex：0 0 200px; 
 background-color：#ccc; 
 height：100px; 
 border：1px纯蓝色; 
 margin-bottom：10px; 
} 
  

Codepen

解决方案

这很烦人，但不能使用为此的flexbox。当他们制定规范时，他们完全放弃了球，因为你所描述的是我们都希望它有99％的时间的行为，而可用的空间 - 空间 - 空间 - 之间以奇怪的方式（特别是空间之间）使项目位置在现实世界中根本没有应用。

$ b

flex-last-row：调整最后一行行为的附加属性空间之间或空间周围合理的柔性容器会受到欢迎。但是，只有在我们的开发人员的梦想。

有围绕它的JavaScript黑客，甚至一些非常具体的CSS黑客（gazillion计算和特定的第n -childs类型），但是再次，使用flexbox的全部原因应该是避免经常出现的黑客行为，例如我们必须对inline-block容器上的浮点数和font-size：0上的clearfix进行操作......

对我来说更好的方法是使用CSS grid，并应用

  .fixed-grid  -  around {
 grid-template-columns：repeat（auto-fill，minmax（150px，1fr））; 
 justify-items：center; 
} 
 / *表示空间风格* / 
 .fixed-grid  - 之间{
 grid-template-columns：repeat（auto-fit，150px）; 
 justify-content：space-between; 
} 
 / *都应该运行等于容器中声明的固定宽度元素* / 
 .grid-element {
 width：150px; 
 
 
 
 
 
 $ b 
通过将网格列的最小宽度设置为它们的元素宽度和最大列宽到1 fr我们可以让他们平均分配他们周围的空间。对于空间样式，自动调整和空间之间的技巧。
 
 
 
因此，它添加列来填充容器，均匀分布它们之间的空间，直到另一列可以添加，并根据需要进行包装。我们一直希望flexbox能做到这一点。
 
 
 
我在研究这个问题之前制作的一支笔： 
 
 
 < a href =https://codepen.io/facundocorradini/pen/XVMLEq =nofollow noreferrer> https://codepen.io/facundocorradini/pen/XVMLEq  
 
 
 
如果您要使用此功能，请确保为不支持网格的浏览器添加一些回退功能。可能是浮动，内嵌块，弯曲或其他。 CSS Grid是真正擅长重写备用，所以应用起来相当简单。  
I am using flexbox to create a nice grid of tiles that automatically wraps when the tiles don't fit on one row.

I use justify-content: space-between so that the tiles stick to the left and right sides of the parent container, and any remaining space is only distributed "in the middle" but not to the left and right.

Any other justify option also puts space to the left and right of the outer two flex items.

The problem is that when a row doesn't have the same number of tiles as the previous row, I'd like the last row's tiles to align to the left. Can this be done using only flex properties?

Current outcome:
▀ ▀ ▀
▀   ▀
Desired outcome:
▀ ▀ ▀
▀ ▀
HTML
<div class="browser">
        <div @click='projectClicked' class="case">
            <h3>Project</h3>
        </div>

        <div @click='projectClicked' class="case">
            <h3>Project</h3>
        </div>

        <div @click='projectClicked' class="case">
            <h3>Project</h3>
        </div>

        <div @click='projectClicked' class="case">
            <h3>Project</h3>
        </div>

        <div @click='projectClicked' class="case">
            <h3>Project</h3>
        </div>
    </div>
CSS
.browser {
    width: 700px;
    display:flex;
    justify-content: space-between;
    padding-bottom:100px;
    flex-wrap:wrap;
    border:1px solid red;
}
.case {
    flex: 0 0 200px;
    background-color:#ccc;
    height:100px;
    border:1px solid blue;
    margin-bottom:10px;
}
Codepen
解决方案
It's pretty annoying, but you can't use flexbox for that. imho they totally dropped the ball when they made the specification, as what you're describing is the behaviour we all would like it to have 99% of the times, while the available space-around and space-between makes items position in weird ways (specially space-between) that have simply no application in the real world. 

A "flex-last-row:" sort of additional property to adjust the behaviour of the last row on space-between or space-around justified flex-containers would have been really welcomed. But that only in our developer dreams.

There are javascript hacks around it, and even some very specific CSS hacks (of the "a gazillion calcs and specific nth-childs" type), but then again, the whole reason to use flexbox should be to avoid recurrent hacks like we have to do with clearfixes on floats and font-size:0 on inline-block containers...

The better way to me is to go with CSS grid instead, and apply 
/* for space-around style */
.fixed-grid--around{
  grid-template-columns: repeat(auto-fill, minmax(150px,1fr));
  justify-items: center;
}
/* for space-between style*/
.fixed-grid--between{
  grid-template-columns: repeat(auto-fit, 150px);
  justify-content: space-between;
}
/* both should run fixed width elements equal to the declared in the container */ 
.grid-element{
  width: 150px;
}
By setting the grid columns minimum width to their elements width and the max column width to 1 fr we can get them to evenly distribute the space around them. For space-between style, autofit and space-between does the trick.

So it adds columns to fill the container, evenly distributes the space between them until another column can be added, and wraps as needed. Just what we always hoped for flexbox to do.

A pen I made before exploring the issue:

https://codepen.io/facundocorradini/pen/XVMLEq

If you're gonna use this, make sure to add some fallback for browsers that don't support grid. might be floats, inline-blocks, flex, or whatever. CSS Grid is really good at overriding the fallbacks, so it's fairly easy to apply. 

                        
这篇关于行为与包装之间的Flexbox空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！