如何在多行flexbox中对齐左最后一行/行[重复]
Posted
技术标签:
【中文标题】如何在多行flexbox中对齐左最后一行/行[重复]【英文标题】:How to align left last row/line in multiple line flexbox [duplicate] 【发布时间】:2013-04-28 23:34:25 【问题描述】:我有一个 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/
如何将最后一行/行对齐到左侧?
【问题讨论】:
我删除了 Flex 标签,因为这与 Adobe/Apache UI 框架无关。 即使你可以只调整最后一行的内容,你也不能因为空格而排列你的元素。你能做的最好的就是使用空格代替:jsfiddle.net/7Hq2E/1。此外,标准属性上没有 moz 前缀。它们应该替换为 IE10 的属性:gist.github.com/cimmanon/727c9d558b374d27c5b6 只需从您的代码中删除 justify-content 即可。您可以使用 margin 属性微调弹性项目之间的空间。 http://jsfiddle.net/katranci/kkRmW/ 我知道这是旧的,但留下的评论 katranci 不正确。如果您不证明内容的合理性,则在调整大小时右侧会出现差距。尝试调整每个小提琴的宽度并观察右侧。你会发现有很大的不同。 看看这个:***.com/a/22018710/130169 【参考方案1】:知道了。 (我认为)(这是我在这里的第一个贡献!)
想象一个布局,每行需要有 4 张图片。宽:205 小时:174 问题:使用 justify-content:space-around,如果最后一行没有 4 个图像(有 3、2 或 1 个),它们不会尊重网格,它们会散开。 所以。
像这样在 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*/
flexbox 容器有 display:flex / flex-wrap:wrap; / justify-content:space-around
最后一行可以有 4、3、2、1 张图片。 4 张图片: 没问题,这三个 div 将折叠成新的一行,因为它们没有高度。 3 张图片: 没问题,一个 div 会在同一行,不可见,另外两个会换行,但会因为没有高度而折叠。 2 张图片: 没问题,两个 div 将在同一行,不可见,其余的...折叠 1 张图片:没问题,三个 div 将填充空间。
【讨论】:
Hacky 但天才。如果使用 React,额外的 (n - 1) 个填充 div 可以很好地封装在一个包装器组件中。 哇,真不错。如果您只需要 2 列,此解决方案可以与:after
混合使用。它还可以根据屏幕大小使用可变列号。太棒了!
天才回答!我会说即使添加比 (n-1) 更多的空子仍然效果很好!
这里是对使用此 hack 的原始 jsFiddle 的修改:jsfiddle.net/7Hq2E/172
这个答案是最好的。它不仅提供了解决方案 - 添加尽可能多的空容器来填充最后一行的整个剩余部分 - 并解释了它的工作原理 - 因为即使空间少于空容器并且它们被移动到下一行,下一行仍然有 height: 0 并且布局没有改变。聪明。【参考方案2】:
很遗憾,这对于 flexbox 是不可能的。
最好的解决方法是在最后一行添加隐形子代“填充”空“块”。这样,实际可见的元素左对齐。
类似的问题: Flex-box: Align last row to grid
【讨论】:
简洁。这应该是公认的答案。 我想出了一个纯 CSS 的解决方案.. 需要注意的是它只能解决两个丢失的项目,因此只能在每个包装行最多三个项目的弹性网格中安全地工作。 Demo:codepen.io/lukejacksonn/pen/dozqVq这里的原理是使用伪元素作为“invisible children”,并赋予它们与容器中的item相同的flex属性。 这里有一个很好解释的解决方法:css-tricks.com/filling-space-last-row-flexbox @WaleedAsender 不,这是为了填补空间。他想将最后一行左对齐到前一行的相同列。这可能是 flexbox 最想要的缺失功能。 优秀的答案,我投了赞成票,但我认为它不应该被标记为接受的答案。我认为没有办法知道要添加多少不可见的孩子,因为它会随着浏览器窗口的大小而变化。【参考方案3】:您可以在最后一个子弹性项目上使用margin-right:auto
。
这里的问题是你会失去这个弹性项目左边的空格属性。
希望对你有帮助!
【讨论】:
这只适用于最后一行。如果有两个或更多,它们将共享空间,并且每个都将在该空间中对齐。【参考方案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;
【讨论】:
【参考方案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>
【讨论】:
这种方法只有在您希望每行能够容纳相同数量的元素时才有效,而不管容器的大小。提问者使用的是绝对单位 (px)。他想要一种类似于 Windows 资源管理器中的图片缩略图的行为,其中每个项目之间的间距会调整,最后一行左对齐,并且每行上的项目数会根据可用空间而变化。【参考方案6】:我已经检查过了,它在我的 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>
【讨论】:
不过,它仅在 jsfiddle 上显示为单列。从图片中也不清楚它是否以调整大小为中心。从这两个容器来看,它不会随着视口的缩小/增长而动态创建更少/更多的行。【参考方案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
【讨论】:
这不起作用,请检查您的 codepen。项目 4 居中对齐以上是关于如何在多行flexbox中对齐左最后一行/行[重复]的主要内容,如果未能解决你的问题,请参考以下文章