【CSS】flex-grow - フレックスアイテムの拡大係数

【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>