Flex box 防止溢出并保持右侧项目固定宽度和左侧项目收缩

Posted 2023-03-17

【中文标题】Flex box 防止溢出并保持右侧项目固定宽度和左侧项目收缩

【英文标题】：Flex box prevent overflow and keep the right item fixed width and left item shrink

【发布时间】：2017-12-06 08:12:05

【问题描述】：

使用flex-basis 属性保持左侧项目具有固定宽度没有问题。但是我有一个场景，我不希望左元素被固定，而是保持右元素的宽度固定。我尝试将flex-basis 放在正确的元素上，但是问题是弹性项目溢出了它的容器。

有没有办法做到这一点？例如我有下面的布局：

.flex-outer 
  display: flex;


.dashboard 
  flex-grow: 1;

.col 
  margin-left: 25px;
  flex-basis: 200px;
  background: orange;


.flex-container 
  display: flex;
  justify-content: space-around;

.flex-item 
  flex: 1 1 200px;
  background: tomato;
  padding: 5px;
  height: 150px;
  margin-top: 10px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  display: flex;
  justify-content: center;
  align-items: center;

<div class="flex-outer">
  <div class="dashboard">
    <ul class="flex-container">
      <li class="flex-item">1</li>
      <li class="flex-item">2</li>
      <li class="flex-item">3</li>
      <li class="flex-item">4</li>
      <li class="flex-item">5</li>
      <li class="flex-item">6</li>
    </ul>
  </div>

  <div class="col">

  </div>
</div>

问题

我想要做的是将右侧元素（橙色）200px 保持在固定宽度，并根据可用空间缩小左侧弹性项目（红色）。但是，问题是当视口太窄时，正确的元素会溢出容器，请参见下图。

【问题讨论】：

你想要 2 个列表项在同一行吗？

你的图片没有为我加载。

我还是不明白。 2 你的图片有什么区别？红色元素仍然占据所有剩余空间

发布了答案。当视口中没有剩余空间时，左边的项目应该怎么办？

【参考方案1】：

由于flex-shrink 默认为1，这意味着.col 可以缩小到给定的200px 以下。

将flex-shrink: 0 添加到.col 规则，它不会。

堆栈sn-p

.flex-outer 
  display: flex;


.dashboard 
  flex-grow: 1;

.col 
  margin-left: 25px;
  flex-basis: 200px;
  flex-shrink: 0;                       /*  added  */
  background: orange;


.flex-container 
  display: flex;
  justify-content: space-around;

.flex-item 
  flex: 1 1 200px;
  background: tomato;
  padding: 5px;
  height: 150px;
  margin-top: 10px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  display: flex;
  justify-content: center;
  align-items: center;

<div class="flex-outer">
  <div class="dashboard">
    <ul class="flex-container">
      <li class="flex-item">1</li>
      <li class="flex-item">2</li>
      <li class="flex-item">3</li>
      <li class="flex-item">4</li>
      <li class="flex-item">5</li>
      <li class="flex-item">6</li>
    </ul>
  </div>

  <div class="col">

  </div>
</div>

---

如果您还想完全避免orange 框被推到视野之外，并且min-width 默认为auto，这意味着dashboard 和flex-container 不会比它们的小内容，您还需要将min-width: 0 设置为他们两个，以便他们将。

堆栈sn-p

.flex-outer 
  display: flex;


.dashboard 
  flex-grow: 1;
  min-width: 0;                         /*  added  */

.col 
  margin-left: 25px;
  flex-basis: 200px;
  flex-shrink: 0;                       /*  added  */
  background: orange;


.flex-container 
  display: flex;
  justify-content: space-around;

.flex-item 
  flex: 1 1 200px;
  min-width: 0;                         /*  added  */
  background: tomato;
  padding: 5px;
  height: 150px;
  margin-top: 10px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  display: flex;
  justify-content: center;
  align-items: center;

<div class="flex-outer">
  <div class="dashboard">
    <ul class="flex-container">
      <li class="flex-item">1</li>
      <li class="flex-item">2</li>
      <li class="flex-item">3</li>
      <li class="flex-item">4</li>
      <li class="flex-item">5</li>
      <li class="flex-item">6</li>
    </ul>
  </div>

  <div class="col">

  </div>
</div>

---

处理左侧项目的第二个选项当然是将flex-wrap: wrap 设置为flex-container

堆栈sn-p

.flex-outer 
  display: flex;


.dashboard 
  flex-grow: 1;

.col 
  margin-left: 25px;
  flex-basis: 200px;
  flex-shrink: 0;                       /*  added  */
  background: orange;


.flex-container 
  display: flex;
  flex-wrap: wrap;                      /*  added  */
  justify-content: space-around;

.flex-item 
  flex: 1 1 200px;
  max-width: 200px;                     /*  added, to keep them max 200px  */
  background: tomato;
  padding: 5px;
  height: 150px;
  margin-top: 10px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  display: flex;
  justify-content: center;
  align-items: center;

<div class="flex-outer">
  <div class="dashboard">
    <ul class="flex-container">
      <li class="flex-item">1</li>
      <li class="flex-item">2</li>
      <li class="flex-item">3</li>
      <li class="flex-item">4</li>
      <li class="flex-item">5</li>
      <li class="flex-item">6</li>
    </ul>
  </div>

  <div class="col">

  </div>
</div>

【讨论】：

我正要发布同样的内容。 :)

这很彻底！非常感谢您，特别是其他选项。

【参考方案2】：

我想要做的是将右侧元素（橙色）保持在固定宽度，并根据可用空间缩小左侧 flex-item（红色）。

您可以使用 css calc 函数来实现这一点。

https://developer.mozilla.org/en/docs/Web/CSS/calc

根据您使用的类名，您可以执行以下操作：

.col 
  width: 200px;


.flex-container 
  width: calc(100% - 200px);

【讨论】：

谢谢！直到现在我才知道calc。包括移动浏览器在内的所有浏览器都支持此功能吗？

@JohnnyQ 是的，在这里你可以看到来自哪些版本/浏览器：caniuse.com/#search=calc