flexboxで幅を縮小しないようにする

flexboxで横並びの設定をした際、幅を縮小しないようにする方法をメモ。

サンプルコード

例として下記のようなコードで、.flexbox-valを改行させるようにして、.flexbox-keyを改行しないようにしたいとします。

<div class="flexbox">
	<div class="flexbox-key">新着情報</div>
	<div class="flexbox-val">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん</div>
</div>

flexboxのみ設定すると.flexbox-keyの方も改行されます。

.flexbox {
	display: flex;
}

flexboxで横並びにするデモページ

.flexbox-keyに幅を指定した場合も同様で、.flexbox-keyのテキストは改行されたままです。

.flexbox-key {
	width: 80px;
}

flexboxで子要素に幅を指定するデモページ

flex-shrink: 0; を指定することで、.flexbox-keyは縮小されなくなるので改行されないようになります。

.flexbox-key {
	flex-shrink: 0;
}

これで意図した表示にすることができました。
flexboxで子要素にflex-shrink: 0;を指定するデモページ

参考サイト

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年10月
 12345
6789101112
13141516171819
20212223242526
2728293031