2017-04-18 188 views
0

2个元素在显示容器内:块边缘折叠,但显示:flex不工作!当一个人使用display: flex exampleflexbox边缘在儿童之间折叠

.wrapper { 
    width: 50%; 
    margin: 0 auto; 
} 
.container { 
    display: flex; 
    // display: block; 
    flex-flow: column nowrap; 
    background-color: green; 
} 
h1 { 
    background-color: #777; 
    margin-bottom: 20px; 
} 
p { 
    background-color: #ccc; 
    margin-top: 15px; 
} 
+0

也许我说错。保证金最低点应该留下。 .container必须有显示:flex不变。设置显示:弯曲在p和h1没有给...并且改变flex-wrap没什么。 – Petr

+0

您能否提供您想要的图像或绘图? 你的解释和评论不是很清楚 – k185

回答

0

页边距不垮。如果您想了解更多关于通用崩溃边缘,这里是一对夫妇的文章与启动:


作为一种变通方法,以使其行为类似于display: block,你可以做这样的事情,在那里你增加一个flex类到containerdisplay: flex,只能定位到h1p

如果你不能说做手工,脚本可以做到这一点为你工作。

.wrapper { 
 
    width: 50%; 
 
    margin: 0 auto; 
 
} 
 
.container { 
 
    display: flex; 
 
    /* display: block; */ 
 
    flex-flow: column nowrap; 
 
    background-color: green; 
 
} 
 
h1 { 
 
    background-color: #777; 
 
    margin-bottom: 20px; 
 
} 
 
p { 
 
    background-color: #ccc; 
 
    margin-top: 15px; 
 
} 
 

 

 
/* custom classes to remove margin */ 
 
.container.flex h1:first-child { 
 
    margin-top: 0; 
 
} 
 
.container.flex p:last-child { 
 
    margin: 0; 
 
}
<div class="wrapper"> 
 
    <div class="container flex"> 
 
    <h1>header h1</h1> 
 
    <p>plain text</p> 
 
    </div> 
 
</div>

+0

这就是我无法删除margin-top:15px; margin-bottom:20px;这个例子是一个扩展到flexbox的大型项目的一部分。也就是说,我永远无法用flexbox获得快速崩溃的边缘? – Petr

+0

@Petr不,您无法通过flexbox获得保证金折叠。那么,为什么你不能删除保证金? – LGSon

+0

@Petr更新了我的回答,提供了一些更多的建议 – LGSon