如何在水平 flexbox 中垂直對齊嵌套的子項？
[英]How to vertically align nested children in a horizontal flexbox?
問題描述
正如您在下面的代碼段中看到的， foo-wrapper下的點不遵循bar-wrapper下文本標簽的垂直對齊方式。 但我期待這一點，根據:nth-child(i)規則。
我怎樣才能使點，它們是不同容器的子容器，隨后是水平 flexbox（ parent-wrapper ）的子容器，遵循另一個容器的子容器的垂直對齊方式？
我是否必須完全放棄 flexbox 並使用網格布局之類的東西？
<!DOCTYPE html> <head> <style> .parent-wrapper { align-items: stretch; display: flex; flex-flow: row nowrap; height: 256px; width: 100%; } .foo-wrapper { background-color: orange; margin: 1.5rem; width: 2px; } .dot { background-color: #ebf0ff; border-radius: 0.5rem; height: 1rem; width: 1rem; } .foo-wrapper div:nth-child(1) { margin-top: 1rem; } .foo-wrapper div:nth-child(2) { margin-top: 1rem; } .foo-wrapper div:nth-child(3) { margin-top: 1rem; } .bar-wrapper { border: 1px solid green; display: flex; flex-flow: column nowrap; margin: 1.5rem; flex-grow: 1; } .bar-wrapper div:nth-child(1) { margin-top: 1rem; } .bar-wrapper div:nth-child(2) { margin-top: 2rem; } .bar-wrapper div:nth-child(3) { margin-top: 4rem; } </style> </head> <body> <div class="parent-wrapper"> <div class="foo-wrapper"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> <div class="bar-wrapper"> <div>Lorem</div> <div>ipsum</div> <div>dolores</div> </div> </div> </body>
1 個解決方案
解決方案1
1 已采納 2019-12-01 18:44:54
除了測量每個 bar-wrapper child 並動態分配高度（js）之外，我發現沒有簡單的方法可以做到這一點。 目前最可行的解決方案似乎是重組您的布局。
案例 1：將bar-wrapper內容和foo-wrapper內容混合到一個 div 中。
.wrapper{
display: flex;
align-items: flex-start;
}
...
<div class="wrapper">
<div class="dot"/>
<div class="content">
<p>text</p>
</div>
<div>
情況 2：如果您想要這種精確的設計，請將左側的線分開（作為簡單的<div/>或作為父容器border-left並將點添加為偽元素，例如
.content::before{
position: absolute;
content:"";
height: 14px;
width: 14px;
border-radius: 7px;
background: #000000;
margin-left: -18px;
}
.content{
position: relative;
padding-left: 18px;
}
填充和邊距是可選的，具體取決於您的布局。
如何對齊 flexbox 孩子的高度？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.