【CSS】flex-grow - フレックスアイテムの拡大係数
CSSのflex-growプロパティについて解説します。
検証環境
flex-grow
flex-growは“フレックスアイテムの拡大係数”のプロパティです。
フレックスコンテナーのサイズがフレックスアイテムの合計より大きい場合、余った空間をこのプロパティの値に応じて拡大します。
基本構文
flow-grow: 値;
サンプル
<style>
div {
display: flex;
background: lightgray;
}
p {
border: 1px solid black;
text-align: center;
}
.p1 {
___ih_hl_start
flex: 1;
___ih_hl_end
}
.p2 {
___ih_hl_start
flex: 3;
___ih_hl_end
}
.p3 {
___ih_hl_start
flex: 7;
___ih_hl_end
}
</style>
<div>
<p class="p1">HTML</p>
<p class="p2">CSS</p>
<p class="p3">JavaScript</p>
</div>