我现在正在抓头发,需要一些帮助。
我有复杂的 flexbox 问题。我只能编辑 CSS,不能更新 HTML。
CodePen 上的示例:https://codepen.io/anon/pen/RqYMZJ
这是我能得到的最接近的,但是 child-6 和 child-4 以及 child-5 之间仍然有一些空间 :(
.main-parent {
border:1px solid #000;
display:flex;
}
.child-1 {
background-color:red;
width:50%;
height:200px;
}
.parent {
flex:1 1 auto;
display:flex;
flex-wrap:wrap;
flex-direction:row;
align-items:flex-end;
}
.child-3 {
background-color:blue;
width:100%;
align-self:flex-start;
}
.child-4 {
background-color:green;
height:40px;
margin: 0 0 0 0;
}
.child-5 {
background-color:yellow;
height:40px;
flex: 0;
}
.child-6 {
width:100%;
background-color:lightblue;
margin: 0 0 0 0;
}
我需要让 child 按如下方式走:
- child-3 父级全宽
- child-6 父级全宽
- child-4 和 child-5 宽度自动,以便它们可以相互跟随。
- 所有 child 都在 parent 的底部
- child-3,父级中位于父级之上的第一个子级。
最佳答案
这是一个“开箱即用”的解决方案。 请注意,我使用您的代码作为入门,您的视觉提示作为最终指南。这远非好的代码或最佳实践,但它是一种让你得到你想要的东西的“黑客”。它是“脆弱的”,结构可能会随着引入的任何新因素或任何重大变化而破裂。这就是为什么应该避免黑客攻击。对于每个新问题,您都需要另一个补丁/破解(直到没有选项为止):) 话虽如此,这是代码。
.main-parent {
position: relative;
border: 1px solid #000;
display: flex;
}
.child-1 {
background-color: red;
min-width: 50%;
min-height: 200px;
}
.parent {
flex: 1 1 auto;
display: flex;
flex-wrap: wrap;
flex-direction: row;
align-items: flex-end;
}
.child-3 {
background-color: blue;
width: 100%;
align-self: flex-start;
}
.child-4 {
background-color: green;
height: 40px;
display: inline-block;
width: auto;
max-width: 50%;
}
.child-5 {
background-color: yellow;
height: 40px;
display: inline-block;
width: auto;
max-width: 50%;
}
.child-6 {
width: 50%;
background-color: lightblue;
position: absolute;
bottom: 40px;
}
<div class="main-parent">
<div class="child-1">1</div>
<div class="parent">
<div class="child-3">3<br><br>1<br><br>1</div>
<div class="child-6">6 line</div>
<div class="child-4">4</div>
<div class="child-5">5</div>
</div>
</div>
- 我基本上已经使用了您的 codepen,并通过将其位置设置为绝对来简单地从流程中删除了
child-6
。 Main parent 现在有相对位置,所以它可以作为引用。 - 因为您已将
child-4
和child-5
的高度硬编码为 40px,所以我简单地设置了child-6< 的底部值
到那个数量(40px)。 - 另外,请注意
child-6
的宽度现在是 50%,因为它是相对于主父级的。
我希望这能解决您当前的问题,但请注意类似的方法。它们可以在您最不希望/最不期望的时候轻易地“咬您”。
附言如果您打算更改 4 岁和 5 岁 child 的高度,还有一项额外的安全措施。我会为此使用 css 变量,并将它也用于 child-6 bottom
值。
例如:
:root {
--your-variable-name: 40px;
}
.child-4,
.child-5 {
height: var(--your-variable-name);
}
.child-6 {
bottom: var(--your-variable-name);
}
稍后如果您决定将 40px 更改为(比方说)60px,您只需在一个地方执行此操作,它会自动更新所有位置并让您的元素保持您最初想要的方式(6 直接在4 和 5 的顶部)。
关于css - 复杂的柔性盒。 child 到 flex-end,但首先 flex-start 垂直,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53508290/