Flexbox 防止边距被尊重
Posted
技术标签:
【中文标题】Flexbox 防止边距被尊重【英文标题】:Flexbox preventing margins from being respected 【发布时间】:2017-10-25 05:33:25 【问题描述】:我正在努力获得一个使用边距和overflow: hidden
的 flexbox 布局。
我正在集成的轮播组件使用此方法进行响应,但一旦将 display:flex
应用于父级,margin
和 overflow: hidden
属性就会被忽略,如下例所示。
顶部版本没有嵌套在一个弹性盒子中,就像它下面的一样,并且不尊重父级的边距。
以下代码和此 Plunker 中演示了该问题。 http://plnkr.co/edit/qU1oq1Vq1X3FQMWLJiQk?p=preview
body
margin: 400px;
.overflowHidden
overflow: hidden;
.flex
display: flex;
<div>
<div class="overflowHidden">
<img src="http://lorempixel.com/600/400" />
</div>
</div>
<div class="flex">
<div>
<div class="overflowHidden">
<img src="http://lorempixel.com/600/400" />
</div>
</div>
</div>
我知道关于这个主题有很多类似的问题,但我找不到与我的特定用例相关的任何内容。
【问题讨论】:
【参考方案1】:解决办法如下:
.flex > div overflow: hidden
revised demo
首先要注意的是,边距与这个问题无关。事实上,利润是受到尊重的。它们只是随元素一起旅行,它正在扩展一个容器。
非flex div容器默认有display: block
。
在block formatting context 中,当图像变得太大而无法放入带有overflow: hidden
的容器时,它会像预期的那样消失。
父 div 及其边距保持稳定且不受干扰。
但是,flex formatting context 的行为不同。
首先,在 flex 示例中,您有三个级别的 div。块示例中只有两个。但这并不重要。
这里的关键信息是这样的:
当你将
display: flex
或display: inline-flex
应用到一个元素时,它就变成了一个弹性容器,它的子元素变成了弹性项目。 默认情况下,弹性项目不能小于他们的内容的大小。它们的默认设置为min-width: auto
。
因此,当图像对于其父级而言太大时,父级(如果它是弹性项目)必须扩展。但在您的示例中,图像的父级 (div.overflowHidden
) 不是弹性项目,它是标准块元素。所以overflow: hidden
工作正常(就像在块示例中一样)。
但是父项的父项是弹性项目。它的默认设置是min-width: auto
。并且它不能缩小到其内容(图像)的大小以下。因此,虽然块示例可以始终保留在屏幕上,但 flex 版本会溢出 body
/ 视口,并占据右边距。
解决方案是覆盖弹性项目上的min-width: auto
默认值。您可以使用:
min-width: 0
或
overflow: hidden
更多详情:Why doesn't flex item shrink past content size?
【讨论】:
感谢迈克尔清晰而详细的回答。非常感谢。【参考方案2】:不确定为什么会发生这种情况,但如果您将 .overflowHidden
应用于包装 flex
父级的元素,或者仅将其应用于 flex 父级,则似乎可以工作。
body
margin: 400px;
overflow-x: hidden;
.overflowHidden
overflow: hidden;
.flex
display: flex;
z-index: -1;
position: relative;
<div>
<div class="overflowHidden">
<img src="http://lorempixel.com/600/400" />
</div>
</div>
<div class="flex overflowHidden">
<div>
<img src="http://lorempixel.com/600/400" />
</div>
</div>
<div class="overflowHidden">
<div class="flex">
<img src="http://lorempixel.com/600/400" />
</div>
</div>
【讨论】:
以上是关于Flexbox 防止边距被尊重的主要内容,如果未能解决你的问题,请参考以下文章