Flexbox等于列高设置主导列高？

Posted 2023-03-05

【中文标题】Flexbox等于列高设置主导列高？

【英文标题】：Flexbox equal column height set dominant column height?

【发布时间】：2018-06-01 22:09:44

【问题描述】：

我做了这个例子：

.example 
  max-width: 600px;


.flex-row 
  display: flex;
  flex-wrap: wrap;


.flex-row .col 
  flex-grow: 1;
  flex-basis: 0;


.flex-row .content 
  flex: 0 0 60%;
  padding: 15px;
  background: #b7bdbb;


.image 
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;


.image img 
  flex-shrink: 0;
  min-width: 100%;
  min-height: 100%;

<div class="example">
  <div class="flex-row">
    <div class="col image">
      <img src="https://via.placeholder.com/500x265" >
    </div>

    <div class="col content">
      some content
    </div>
  </div>
</div>

我希望裁剪左侧的图像，但我希望我的内容决定.example 元素的整体高度。

目前，图像决定了整个元素的总高度。我想将图像裁剪为右栏中内容的大小。我的例子可行吗？

【问题讨论】：

相关 - ***.com/questions/34194042/…

我的回答有用吗？

我仍然需要使用我当前的解决方案测试浏览器对 IE 的支持。但你说：This overcome 2 bugs in IE, where one can't use calc in shorthand flex and the border-box issue to have padding inlcuded in the set width，但我目前的解决方案不需要calc，所以我想知道你是否暗示了其他一些错误？

不是，calc 我以前是从宽度上减少padding的，不然宽度是60%+padding。如果没问题，那么就不需要使用它，如果没有，那么这就是box-sizing: border-box 的解决方法，这是我的意思的第二个错误。另一种选择是在弹性项目上放置填充并在其子项目上使用边距。

我可以问一下为什么你保留一个不能跨浏览器工作的答案，而接受的答案有一个？

【参考方案1】：

如果我理解正确，您希望您的右栏设置#example 的整体高度

.example 
  max-width: 600px;


.flex-row 
  display: flex;
  flex-wrap: wrap;


.flex-row .col 
  flex-grow: 1;
  flex-basis: 0;


.flex-row .content 
  flex: 0 0 60%;
  padding: 15px;
  background: #b7bdbb;


.image 
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;


.image img 
  flex-shrink: 0;
  min-width: 100%;
  max-width: 100%;
  position: absolute;

<div class="example">
  <div class="flex-row">
    <div class="col image">
      <img src="https://via.placeholder.com/500x265" >
    </div>

    <div class="col content">
      some content
    </div>
  </div>
</div>

【讨论】：

这会拉伸图像。

@Stephan-v 图片应该在中心吗？我已经更新了小提琴。

@Stephan-v 请注意，这不适用于跨浏览器

@LGSon 对于哪些浏览器不起作用，为什么？使用 flexbox 时，我不关心一开始就不支持 flexbox 的浏览器。如果除此之外还有其他问题，请告诉我。谢谢。

@Stephan-v 我不谈论不支持 Flexbox 的浏览器。如果您测试此解决方案，您会发现它在 Firefox、IE11 和 Safari 10.x 中无法正常工作，它们通常在绝对定位的弹性项目方面存在问题。在浏览器支持方面，我已经发布了最佳解决方案的答案。

【参考方案2】：

您可以在父元素上使用position: relative，在图像上使用position: absolute，并设置height: 100%

.example 
  max-width: 600px;

.flex-row 
  display: flex;
  flex-wrap: wrap;

.flex-row .content 
  flex: 0 0 60%;
  padding: 15px;
  background: #b7bdbb;

.image 
  flex: 1;
  position: relative;

.image img 
  height: 100%;
  position: absolute;
  vertical-align: top;

<div class="example">
  <div class="flex-row">
    <div class="col image"><img src="https://via.placeholder.com/500x265" ></div>
    <div class="col content">some content</div>
  </div>
</div>

【讨论】：

我不能使用 object-fit 因为它有糟糕的浏览器支持：caniuse.com/#search=object-fit

高度仍然比右栏中的内容长得多。

这不包括左栏。

你也可以加width: 100%

【参考方案3】：

我希望裁剪左侧的图像，但我希望我的内容 指定.example 元素的总高度。

当使用img时，首先想到的是object-fit，虽然它没有最好的浏览器支持，这里有一个，使用background-image。

一般来说，当使用background-image 时，在外部 CSS 中设置图像源，但有时希望在标记中设置它，就像使用 img 时一样。

当需要这样做时，一个经常被忽视的可能性是简单地使用style 属性，它并不比img 上的src 属性更复杂，可以像这样在标记中设置源： style="background-image: url(...)"

我也使用了flex-basis: calc(60% - 30px)。这克服了 IE 中的 2 个错误，其中一个不能使用简写 flex 的 calc 和 border-box 问题，以便在设置的宽度中包含填充。

堆栈sn-p

.example 
  max-width: 600px;


.flex-row 
  display: flex;
  flex-wrap: wrap;


.flex-row .image 
  flex-grow: 1;
  background-position: center;
  background-size: cover;


.flex-row .content 
  flex-basis: calc(60% - 30px);
  padding: 15px;
  background: #b7bdbb;

<div class="example">
  <div class="flex-row">
    <div class="col image" style="background-image: url(https://via.placeholder.com/500x265)">
    </div>

    <div class="col content">
      some content
    </div>
  </div>
</div>

---

如果您仍然需要（或必须）使用img，这里有一个可以跨浏览器工作的示例。

由于有多个浏览器，i.a. Safari（似乎从第 11 版开始修复）和 IE，在 Flexbox 和绝对定位的 flex 项方面存在问题，我在这里使用 transform: translate 来提供使图像居中的解决方案。

堆栈sn-p

.example 
  max-width: 600px;


.flex-row 
  display: flex;
  flex-wrap: wrap;


.flex-row .image 
  flex-grow: 1;
  position: relative;
  overflow: hidden;


.flex-row .image img 
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);


.flex-row .content 
  flex-basis: calc(60% - 30px);
  padding: 15px;
  background: #b7bdbb;

<div class="example">
  <div class="flex-row">
    <div class="col image">
      <img src="https://via.placeholder.com/500x265)" >
    </div>

    <div class="col content">
      some content
    </div>
  </div>
</div>

【参考方案4】：

您可以使用backgound-image 属性实现此目的

.example 
  max-width: 600px;


.flex-row 
  display: flex;
  flex-wrap: wrap;


.flex-row .col 
  flex-grow: 1;
  flex-basis: 0;


.flex-row .content 
  flex: 0 0 60%;
  padding: 15px;
  background: #b7bdbb;


.image 
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-image:url('https://via.placeholder.com/500x265');
  background-size:cover;
  background-position:50% 50%;


.image img 
  flex-shrink: 0;
  min-width: 100%;
  min-height: 100%;

<div class="example">
  <div class="flex-row">
    <div class="col image">
    </div>

    <div class="col content">
      some content
    </div>
  </div>
</div>

【讨论】：

我的网址无法直接访问。所以我需要在 javascript 中编写它并通过 Javascript 设置元素的样式。如果这可以通过其他方式完成，出于性能原因并简化我的代码，我会更喜欢它。