BinaryDevelop
  1. ホーム
  2. html

[解決済み] 固定幅のカラムを2つ、フレキシブルカラムを1つ、中央に配置するにはどうすればよいですか？

2022-03-16 01:09:09

質問

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 (フレックスボックス使用時の提案です) を使用することで flex: 0 0 230px; という意味になります。

  • 0 =成長しない（略 flex-grow )
  • 0 = don't shrink (短縮版 flex-shrink )
  • 230px = で始まる。 230px (の略記）。 flex-basis )

which means: 常に 230px .

フィドルを見る ありがとうございます。

あ、あと 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;
}

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します