Question

假设我使用display: flex;（demo）设置了简单的三列布局。在左列和右列中，我有指定宽度的图像（每个100px）。在中间栏中，我有主要内容区域。该区域具有高分辨率图像：

<div id="main-container">

    <div id="left-content">
        <div><img src="http://agevoluzione.com/wp-content/uploads/2014/07/Work-in-progress-1024x603.png"></div>
        <div><img src="http://agevoluzione.com/wp-content/uploads/2014/07/Work-in-progress-1024x603.png"></div>
        <div><img src="http://agevoluzione.com/wp-content/uploads/2014/07/Work-in-progress-1024x603.png"></div>
        <div><img src="http://agevoluzione.com/wp-content/uploads/2014/07/Work-in-progress-1024x603.png"></div>
    </div>

    <div id="center-content">
        <div><img src="https://farm6.staticflickr.com/5560/14080568109_9f33dc7964_o.jpg"></div>
    </div>

    <div id="right-content">
        <div><img src="http://agevoluzione.com/wp-content/uploads/2014/07/Work-in-progress-1024x603.png"></div>
        <div><img src="http://agevoluzione.com/wp-content/uploads/2014/07/Work-in-progress-1024x603.png"></div>
        <div><img src="http://agevoluzione.com/wp-content/uploads/2014/07/Work-in-progress-1024x603.png"></div>
        <div><img src="http://agevoluzione.com/wp-content/uploads/2014/07/Work-in-progress-1024x603.png"></div>
    </div>
    </div>

</div>

我需要调整CSS，以便中心列宽度最多为侧列之间可用空间的100％（换句话说，它必须始终为宽：windowSize-column1-column2）。如果窗口缩小，我需要中心列（及其图像）随之收缩。

#main-container
    {
    display: flex;
    justify-content: space-between;
    align-items: center;
    }

#left-content,
#right-content
    {
    width: 102px;

    border-style: solid;
    border-width: 2px;
    border-color: magenta;
    }

#left-content img,
#right-content img
    {
    width: 100px;
    }

#center-content
    {
    }

#center-content img
    {
    max-width: 100%;
    height: auto;
    }

我错过了什么？

Answer 1

正确的方法是使用flex。将flex设置为1 1 auto为中间列，将0 0 auto设置为侧列。这使得侧列始终是指定的宽度（或内容的宽度，如果未指定），并且中间列占用剩余空间（相应地增长/收缩）。这是CSS（demo）：

#main-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#center-content {
    flex:1 1 auto; /* Lets middle column shrink/grow to available width */
}
#left-content,
#right-content {
    flex:0 0 auto; /* Forces side columns to stay same width */
    width:100px; /* Sets the width of side columns */
}
img {
    max-width:100%; /* Shrinks images to fit container */
}

Answer 2

#center-content {
    width: calc(100% - 204px);
}

这是小提琴：http://jsfiddle.net/sachinvermarip/s1j40s42/1/

Answer 3

如果Starting the logger (/Users/axel/Library/Android/sdk/platform-tools/adb logcat *:S ReactNative:V ReactNativeJS:V)... --------- beginning of crash --------- beginning of system --------- beginning of main中自动调整大小的部分的内容大于其适合的可用区域，则浏览器（至少Chrome和Firefox）将不会尊重flexbox，并且列/行将为它的内容占用足够的空间，而不是目标容器。因此，flex:1 1 auto;中所有列/行的总宽度/高度将超过100％。

如果flexbox与某些显式大小相关联，例如flex:1 1 auto;，则列的大小将正确调整为可用空间，并且将简单地忽略10％。 width: 10%;中的大小同样有效。

使用px代替overflow: hidden;会有一些有趣的事情发生。 Firefox中的结果相同，但Chrome会删除相反轴上的内容。即使您设置了width: 10%;，Chrome也会剔除右侧的内容（轴overflow-y: hidden;）。

以下是一个例子：

Answer 4

有一种更简单的方法可以实现您所要的内容，并且只需要一行CSS（flex-grow: 1）。

.main-container {
  display: flex;
  min-height: 100vh;
}

.main-container > div {
  background-color: gray;
}

#center-content {
  flex-grow: 1;
  background-color: red;
}

<div class="main-container">    
  <div id="left-content">
    left
  </div>

  <div id="center-content">
  </div>

  <div id="right-content">
    right
  </div>
</div>

Answer 5

这是bootstrap 4解决方案(demo)：

<div id="main-container" class="d-flex justify-content-between">

<div id="left-content" class="col-auto">
<p> left</p>
</div>

<div id="center-content" class="flex-fill bg-success">
<p> middle stretched</p>
</div>

<div id="right-content" class="col-auto">
<p>right</p>
</div>

</div>

Answer 6

#center-content
    {
        width:100%;
    }

三栏HTML弹性框：如何设置中间的一个以获得所有剩余空间？

6 个答案: