flexボックスのレイアウトで、flexアイテムにflex-shrinkプロパティを指定してテキストが改行されるのを防ぎます。
デモページはこちら
以下のhtml構造で確認します。
<p>flex-shrink: 1(初期値)</p>
<div class="div-parent">
<div class="div-icon style01">アイコン</div>
<div>ダミーテキストダミーテキストダミーテキスト</div>
</div>
<div class="div-parent">
<div class="div-icon style01">アイコンアイコン</div>
<div>ダミーテキストダミーテキストダミーテキスト</div>
</div>
<p>flex-shrink: 0</p>
<div class="div-parent">
<div class="div-icon style02">アイコン</div>
<div>ダミーテキストダミーテキストダミーテキスト</div>
</div>
<div class="div-parent">
<div class="div-icon style02">アイコンアイコン</div>
<div>ダミーテキストダミーテキストダミーテキスト</div>
</div>
CSSはflex-shrinkプロパティを初期値の1から0に変更するだけです。flex-shrinkは必ずflexアイテムに指定します。これでアイコンのflexアイテムが文字量よりも狭くなって、文字が改行することはありません。
.div-parent {
display: flex;
align-items: center;
margin: 0 0 1em;
padding: 10px;
background: #fff;
}
.div-icon {
font-weight: bold;
color: #fff;
margin-right: 10px;
padding: 3px 10px;
background: #f36c49;
}
.style01 {
flex-shrink: 1;
}
.style02 {
flex-shrink: 0;
}
flex-shrinkプロパティはflexアイテムの縮小比率を指定します。指定する比率が大きいほど大きく縮小します。0を指定した場合は全く縮小しなくなります。





