Flexbox 防止边距被尊重

Posted

技术标签:

【中文标题】Flexbox 防止边距被尊重【英文标题】:Flexbox preventing margins from being respected 【发布时间】:2017-10-25 05:33:25 【问题描述】:

我正在努力获得一个使用边距和overflow: hidden 的 flexbox 布局。

我正在集成的轮播组件使用此方法进行响应,但一旦将 display:flex 应用于父级,marginoverflow: 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: flexdisplay: 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 防止边距被尊重的主要内容,如果未能解决你的问题,请参考以下文章

flexbox 边距导致溢出

Flexbox 子项的折叠边距

flexbox边距在孩子之间折叠[重复]

如何使用 flexbox 为图像留出边距?

Img 不尊重 html 中的宽度(使用 flexbox)

带边距排水沟的 Flexbox 网格系统