web-dev-qa-db-ja.com

中央に1本のフレキシブルコラムを持つ2本の固定幅コラムを持つにはどうすればよいですか？

私は左と右の列が固定幅を持ち、利用可能なスペースを埋めるために中央の列が曲がる3つの列を持つフレックスボックスレイアウトを設定しようとしています。

列の寸法を設定したにもかかわらず、ウィンドウが縮小すると、それらはまだ縮小しているように見えます。

誰もがこれを達成する方法を知っていますか？

ユーザーの操作に基づいて右側の列を非表示にすることもできます。この場合、左側の列は依然として固定幅を維持しますが、中央の列は残りのスペースを埋めます。

#container {
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    max-width: 1200px;
}

.column.left {
    width: 230px;
}

.column.right {
    width: 230px;
    border-left: 1px solid #eee;
}

.column.center {
    border-left: 1px solid #eee;
}
<div id="container">
    <div class="column left">
        <p>Anxiety was a blog series that ran in the New York Times Opinion section from January 2012 to July 2013. It featured essays, fiction, and art by a wide range of contributors that explored anxiety from scientific, literary, and artistic perspectives.</p>
    </div>
    <div class="column center">
        <img src="http://i.imgur.com/60PVLis.png" width="100" height="100" alt="">
    </div>
    <div class="column right">
        Balint Zsako
        <br/> Someone’s Knocking at My Door
        <br/> 01.12.13
    </div>
</div>

これがJSFiddleです： http://jsfiddle.net/zDd2g/185/ /

htmlcsscss3flexbox
274
mheavers

widthを使用する代わりに（これはflexboxを使用するときの提案です）、flex: 0 0 230px;を使用することができます。

  • 0 =成長しない（flex-growの省略形）
  • 0 =縮小しない（flex-shrinkの省略形）
  • 230px = 230pxで開始（flex-basisの省略形）

つまり、常に230pxになります。

フィドルを参照 、ありがとう@TylerH

ああ、そしてここではjustify-contentとalign-itemsは必要ありません。

553
Rudie

列の寸法を設定したにもかかわらず、ウィンドウが縮小すると、それらはまだ縮小しているように見えます。

フレックスコンテナの初期設定は flex-shrink: 1 です。それがあなたのコラムが縮小している理由です。

どの幅を指定しても構いません（ width: 10000px ）、flex-shrinkでは指定された幅を無視して、フレックスアイテムがコンテナからオーバーフローするのを防ぐことができます。

左右の列の幅が固定されている3列のフレックスボックスを設定しようとしています...

縮小を無効にする必要があります。ここにいくつかのオプションがあります：

.left, .right {
     width: 230px;
     flex-shrink: 0;
 }

OR

.left, .right {
     flex-basis: 230px;
     flex-shrink: 0;
}

または、仕様で推奨されているように、

.left, .right {
    flex: 0 0 230px;    /* don't grow, don't shrink, stay fixed at 230px */
}

7.2。柔軟性のあるコンポーネント

省略形は 一般的な用途 に対応するために未指定のコンポーネントを正しくリセットするため、作成者は直接の省略形プロパティではなくflex省略形を使用して柔軟性を制御することをお勧めします。

詳細はこちら： フレックスベースと幅の違いは何ですか？

ユーザーの操作に基づいて右側の列を非表示にするという追加の作業があります。この場合、左側の列は依然として固定幅を維持しますが、中央の列は残りのスペースを埋めます。

これを試して：

.center { flex: 1; }

これにより、中央の列が削除されたときの兄弟のスペースも含めて、使用可能なスペースを消費することができます。

改訂Fiddle

45
Michael_B

古いブラウザとの互換性はドラッグすることができますので、進めてください。

それが問題にならない場合は、次に進んでください。スニペットを実行します。フルページビューに移動してサイズを変更します。 Centerは、左または右のdivを変更せずに自分自身のサイズを変更します。

要件を満たすように左右の値を変更します。

ありがとうございました。

お役に立てれば。

#container {
  display: flex;
}

.column.left {
  width: 100px;
  flex: 0 0 100px;
}

.column.right {
  width: 100px;
  flex: 0 0 100px;
}

.column.center {
  flex: 1;
  text-align: center;
}

.column.left,
.column.right {
  background: orange;
  text-align: center;
}
<div id="container">
  <div class="column left">this is left</div>
  <div class="column center">this is center</div>
  <div class="column right">this is right</div>
</div>
1
2xSamurai