web-dev-qa-db-ja.com

3列のHTMLフレックスボックス：中央のフレックスボックスを設定して残りのスペースをすべて取得するにはどうすればよいですか？

display: flex;（ demo ）を使用して設定した簡単な3列のレイアウトがあるとします。左と右の列に、指定した幅（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>

中央の列の幅がサイド列の間の使用可能なスペースの最大100％になるようにCSSを微調整する必要があります（つまり、常にこの幅である必要があります：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;
    }

何が欠けていますか？

htmlcssflexbox
24
Dr. Gianluigi Zane Zanettini

それを行う適切な方法は flex を使用することです。中央の列の場合はflexを1 1 autoに設定し、側の列の場合は0 0 100pxに設定します。これにより、サイドカラムは常に指定された幅（またはautoに設定されている場合はコンテンツの幅）になり、中央のカラムは残りのスペースを占有します（それに応じて拡大/縮小）。

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

#center-content {
  /* Lets middle column shrink/grow to available width */
  flex: 1 1 auto;
}

#left-content,
#right-content {
  /* Forces side columns to stay same width */
  flex: 0 0 100px;
}

img {
  /* Shrinks images to fit container */
  max-width: 100%;
}
<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>
37
0b10011
#center-content {
    width: calc(100% - 204px);
}

これがフィドルです： http://jsfiddle.net/sachinvermarip/s1j40s42/1/

4
Sachin

flexboxの自動サイズ設定されたセクションのコンテンツが、収まる範囲よりも大きい場合、ブラウザ（少なくともChromeおよびFirefox））はflex:1 1 auto;を尊重しません、そして列/行は、ターゲットコンテナではなく、そのコンテンツのために十分なスペースを取ります。その結果、flexboxのすべての列/行の合計幅/高さは100％を超えます。

flex:1 1 auto;が明示的なサイズ（width: 10%;など）と結合されている場合、列は使用可能なスペースに合わせて適切にサイズ設定され、10％は単に無視されます。 pxのサイズも同様に機能します。

overflow: hidden;の代わりにwidth: 10%;を使用すると、おかしなことが起こります。 Firefoxの結果は同じですが、Chromeは反対の軸のコンテンツを切り取ります。overflow-y: hidden; Chromeを設定しても、右側（軸x）。

次に例を示します。

#center-content {
  width: 100%;
  height: 10%;
  flex: 1 1 auto;
}
0
zmechanic

これはbootstrap 4 solution （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>
0
juFo

あなたが求めていることを達成するためのより簡単な方法があり、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>
0
Andy Hoffman