☰

中央に 1 つの可変列を配置し、固定幅の列を 2 つ配置するにはどうすればよいですか? 質問する

tag-icon • tag-icon html css flexbox
中央に 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/

ベストアンサー1

width（フレックスボックスを使用する場合の提案）を使用する代わりに、flex: 0 0 230px;次を意味する を使用できます。

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

つまり、常に であるということです230px。

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

ああ、ここでは and は必要ありませ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;
}

おすすめ記事