Question

我具有以下基于Bootstrap的Flexbox的布局：

<div class="d-flex flex-row">
  <section class="left"></section>
  <section class="center"></section>
  <section class="right"></section>
</div>

这是CSS：

.left {
    flex: 0 0 360px;
}

.right {
    flex: 0 0 400px;
}

.center { 
    flex: 1; 
}

因此，在这种布局下，我有2个左和右列，它们的宽度固定，并有一个流体中心列。我想知道是否有一种方法可以指定中心容器的最小宽度，以便由于浏览器宽度较小而在达到最小宽度时获得一个水平滚动条。

谢谢！

Answer 1

您可以在弹性项目中使用min-width来定义将应用的最小宽度flex-shrink。使用overflow-x，您可以定义子节点超出其内容宽度时它们的行为。

编辑＃1

如Michael_B所述，您可以使用内置的flexbox解决方案，而不必使用min-width。解决方案是设置flex-grow: 1;，flex-shrink: 0;和flex-basis: 100px; /* Or any value you want */。这3个属性的简写为flex: 1 0 100px;。

section {
  border: 1px solid black;
}

.left {
  flex: 0 0 360px;
}

.right {
  flex: 0 0 400px;
}

.center { 
    flex: 1 0 100px;
    white-space: nowrap;
    overflow-x: auto;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex flex-row">
  <section class="left">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </section>
  <section class="center">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </section>
  <section class="right">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </section>
</div>

Answer 2

只需将以下样式属性添加到.center元素：

.center { 
    flex: 1 1 auto;
    min-width: 100px; /* Set value to whatever you want */
    overflow: auto; 
}

Stackblitz Example

在弹性框布局中指定最小宽度

2 个答案:

编辑＃1