非直接子容器的挠性容器似乎垂直对齐。为什么？
非直接子容器的挠性容器似乎垂直对齐。为什么？
提问于 2020-03-10 03:04:20
我想有三个(黄色框)标签: A，B，和C。
我希望A是左对齐，B和C是右对齐。因为我不希望A的框架在到达B之前生长，所以我设置了A的display: inline。这几乎是可行的，但出于某种原因，A是不正确的:它显示垂直不对齐。这似乎源自于它是唯一不是flex容器的直接子元素的p元素。但为什么会这样呢？
body {
margin: 0px;
}
#main {
display: flex;
}
.node {
margin: 0px;
padding: 16px;
border: 2px dashed yellow;
}<div id="main" style="background: red;">
<div style="flex-grow: 1;">
<p class="node" style="display: inline;">A</p>
</div>
<p class="node">B</p>
<p class="node">C</p>
</div>
谢谢
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-03-10 03:14:13
flex元素的唯一子元素(直接后代)具有flex-items的属性。
给你：
body {
margin: 0px;
}
#main {
display: flex;
background: red;
}
.node {
margin: 0px;
padding: 16px;
border: 2px dashed yellow;
}
.node:first-child {margin-right:auto}<div id="main" style="background: red;">
<p class="node">A</p>
<p class="node">B</p>
<p class="node">C</p>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60611005
复制相关文章
相似问题
腾讯云开发者
