将 3 个不相等的块左、中、右对齐
Posted
技术标签:
【中文标题】将 3 个不相等的块左、中、右对齐【英文标题】：Align 3 unequal blocks left, center and right 【发布时间】：2021-06-15 06:32:27 【问题描述】：我正在尝试对齐由 3 个内容块组成的顶部菜单。
我想要实现的是：
块 1：左对齐 块 2：水平居中 块 3：右对齐如果所有 3 个块的大小相同，我可以使用 flexbox（就像在 sn-p 中一样），但它们不是，所以它不会产生我需要的输出。
相反，flexbox 在 3 个块之间放置相等的空间 - 导致中间块偏离中心对齐。
我想知道这是否可以通过 flexbox 实现，或者如果不能，另一种解决方案。这需要在生产中稳健地工作，因此“网格”解决方案不适用，因为支持不足。
.container
margin: 20px 0;
.row
background-color: lime;
display: flex;
justify-content: space-between;
.item
background-color: blue;
color: #fff;
padding: 16px;
<div class="container">
<div class="row">
<div class="item">left, slightly longer</div>
<div class="item">center, this item is much longer</div>
<div class="item">right</div>
</div>
</div>【问题讨论】：
我查看了“重复”的答案。这不是同一个场景。帖子中的所有弹性和自动边距解决方案都依赖于“相同大小”的块，这是这里的一个关键区别。网格支持不够。 你能给 "flex-grow: 1;"对于“.item”类并检查 我有the same question 并遇到了出色的In CSS Flexbox, why are there no “justify-items” and “justify-self” properties?，值得一读，并且答案提供了与the currently accepted answer below 不同的几种解决方案。 【参考方案1】：您可以考虑将flex-grow:1;flex-basis:0% 用于左右元素，然后使用text-align 来对齐里面的内容。我添加了一个额外的包装器以仅将背景保留在文本周围。
诀窍是通过仅删除中间内容并将其平均拆分为左右元素来计算可用空间。
.container
margin: 20px 0;
padding-top:10px;
background:linear-gradient(#000,#000) center/5px 100% no-repeat; /*the center*/
.row
background-color: lime;
display: flex;
color: #fff;
.item:not(:nth-child(2))
flex-basis: 0%;
flex-grow: 1;
.item:last-child
text-align: right;
.item span
background-color: blue;
display:inline-block;
padding: 16px;
border: 2px solid red;
box-sizing:border-box;
<div class="container">
<div class="row">
<div class="item"><span>left, slightly longer</span></div>
<div class="item"><span>center, this item is much longer</span></div>
<div class="item"><span>right</span></div>
</div>
</div>您也可以通过保持元素关闭来执行相同的操作。只需调整 text-align：
.container
margin: 20px 0;
padding-top: 10px;
background: linear-gradient(#000, #000) center/5px 100% no-repeat; /*the center*/
.row
background-color: lime;
display: flex;
color: #fff;
.item:not(:nth-child(2))
flex-basis: 0%;
flex-grow: 1;
.item:first-child
text-align: right;
.item span
background-color: blue;
display: inline-block;
padding: 16px;
border: 2px solid red;
box-sizing: border-box;
<div class="container">
<div class="row">
<div class="item"><span>left, slightly longer</span></div>
<div class="item"><span>center, this item is much longer</span></div>
<div class="item"><span>right</span></div>
</div>
</div>【讨论】：
你能解释一下.item:not(:nth-child(2))吗？
@CodyBugstein 这意味着不要选择第二个孩子。所以我只将 CSS 应用于第一个和最后一个
啊，好吧，我以为您试图将解决方案推广到超过 3 个项目的情况【参考方案2】：
我问了一个似乎非常相似的问题，堆栈溢出将我引导到这里。 @Paolamoralesval 的回复启发我意识到可以在 CSS 网格中实现所需的效果。现在网格支持几乎是普遍的，我希望这能满足每个人的需求。这个解决方案是我相信完全响应窗口大小以及标题项的高度和宽度，如果您调整查看 sn-p 的窗口大小，您应该看到。
.header
grid-row: 1;
grid-column: 1;
display: grid;
grid-template-rows: min-content;
grid-template-columns: 1fr 1fr 1fr;
.header-left
justify-self: start;
align-self: center;
text-align: left;
background-color: red;
.header-center
justify-self: center;
align-self: center;
text-align: center;
background-color: green;
.header-right
justify-self: end;
align-self: center;
text-align: right;
background-color: blue;
.shrink-kitty
width: 200px;
<html>
<body>
<div class="page">
<div class="header">
<div class="header-left">
<img class="shrink-kitty" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Kittyply_edit1.jpg/1280px-Kittyply_edit1.jpg"/><br/>
By David Corby<br/>
Edited by: <a href="//commons.wikimedia.org/wiki/User:Arad" title="User:Arad">Arad</a><br/><a href="//commons.wikimedia.org/wiki/File:Kittyplya03042006.JPG" title="File:Kittyplya03042006.JPG">Image:Kittyplya03042006.JPG<a><br/><a href="https://creativecommons.org/licenses/by/2.5" title="Creative Commons Attribution 2.5">CC BY 2.5</a>, <a href="https://commons.wikimedia.org/w/index.php?curid=1839754">Link</a>
</div>
<div class="header-center">In the middle</div>
<div class="header-right">
Much much much much more on the right hand side</br>
Indeed two lines
</div>
</div>
<div class="body">Body of the page</div>
<div class="footer">At the bottom</div>
</div>
</body>
</html>【讨论】：
【参考方案3】：你能为项目类提供 flex-grow:1 并检查
.item
background-color: blue;
color: #fff;
padding: 16px;
flex-grow:1;
希望这就是你要找的东西
【讨论】：
【参考方案4】：使用显示表的替代方法（一个古老的支持网格）。
引用https://www.w3schools.com/cs-s-ref/pr_tab_table-layout.asp
如果第一行没有宽度，则列宽在表格中均分，与单元格内的内容无关
.container
display: table;
table-layout: fixed
// would divide cells equally along table's 100% width.
.row
display: table-row
.item
display: table-cell
【讨论】：
以上是关于将 3 个不相等的块左、中、右对齐的主要内容，如果未能解决你的问题，请参考以下文章