中央に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/

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

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

つまり、常に 230px。

フィドルを見る、ありがとう@TylerH

ああ、あなたはここjustify-contentとalign-itemsここを必要としません。

img {
    max-width: 100%;
}
#container {
    display: flex;
    x-justify-content: space-around;
    x-align-items: stretch;
    max-width: 1200px;
}
.column.left {
    width: 230px;
    flex: 0 0 230px;
}
.column.right {
    width: 230px;
    flex: 0 0 230px;
    border-left: 1px solid #eee;
}
.column.center {
    border-left: 1px solid #eee;
}

列の寸法を設定しても、ウィンドウが縮小するにつれて、列は縮小しているように見えます。

フレックスコンテナーの初期設定はflex-shrink: 1です。そのため、列が縮小しています。

指定した幅（それは可能性がありますwidth: 10000px）は関係ありません。flex-shrink指定した幅は無視でき、フレックスアイテムがコンテナーからオーバーフローするのを防ぎます。

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

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

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

または

.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; }

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

改訂されたフィドル

古いブラウザとの互換性は問題になる可能性があるため、助言してください。

それが問題でなければ、次に進みます。スニペットを実行します。全ページ表示に移動してサイズを変更します。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>