左流体 div，中心拉伸到最大宽度 div，右流体 div答案

【问题标题】：Left fluid div, center stretch up to max-width div, right fluid div左流体 div，中心拉伸到最大宽度 div，右流体 div
【发布时间】：2017-01-06 16:15:49
【问题描述】：

我有以下情况：

<div class="container">
   <div class="left"></div>
   <div class="center"></div>
   <div class="right"></div>
</div>

我需要三个潜水（左、中、右）排成一排。左右 div 必须占据中心 div 之后剩下的所有空白空间（左侧 50% 的空白空间，右侧 50% 的空白空间）。中心 div 必须拉伸到最大值，但它必须具有 max-width:1000px。因此，例如，如果屏幕宽度

【问题讨论】：

@Paulie_D 它们必须为 0。因为空格=0。
@Paulie_D 不，他们不会有内容。它们只有边框。
@Paulie_D 这里的关键思想是中心 div 必须拉伸到最大值，但要拉伸到 1000 像素。所以我无法将其宽度设置为固定值。
@JimJim2000 解决了它...在下面查看我的答案..您必须为此使用flexbox 和flex-basis...

标签： html css flexbox

【解决方案1】：

将display:flex设置为父div

#main {
    width: 100%;
    height: 300px;
    border: 1px solid black;
    display: -webkit-flex; /* Safari */
    display: flex;
}

#main div {
    -webkit-flex: 1;  /* Safari 6.1+ */
    -ms-flex: 1;  /* IE 10 */
    flex: 1;
    padding:20px;
}

<div id="main">
  <div style="background-color:coral;">Left</div>
  <div style="background-color:lightblue;max-width:1000px;">Center</div>
<div style="background-color:lightgreen;">Right</div>
</div>

【讨论】：

【解决方案2】：

这里是Demo

.container{
  display: flex;
  align-items: center;
  width: 100vw;
}
.container div{
  height: 100vh;
  text-align: center;
}
.left, .right{
  flex:1;
}
.center{
  flex: 25;
  max-width: 1000px;
  background: green;
}
.left{
  background: red;
}
.right{
  background: blue;
}

<div class="container">
   <div class="left">left</div>
   <div class="center">center</div>
   <div class="right">right</div>
</div>

【讨论】：

但在您的示例中，中心的宽度最小。我确实在我的问题中说，该中心必须最大限度地伸展。因此，如果屏幕宽度为
那么，中心 div 可能的宽度是从 0 到 1000px 这是什么意思？

【解决方案3】：

使用 flexbox 和 center div 只能从 1000 像素的 flex-basis 到 shrink。

这可确保center 将拉伸到最大 1000 像素

下面的sn-p：

.container {
  display: flex;
}
.container > div {
  height: 100px;
  border: 1px solid black;
}
.left,
.right {
  flex: 1;
}
.center{
  flex: 0 1 1000px;
}

<div class="container">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>

【讨论】：

您将 flex-bases 设置为 1000px。但它是未知的。我不知道最小的价值。我只知道最大值。
不是我也将flex-grow 设置为0 并且flex-basis 将像最大宽度一样工作...通过调整窗口大小来检查它
这是正确的，中心不能超过 1000 像素，但它可以缩小。
好的，我需要一些时间来检查一下~ 10 分钟。