WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > CSSリファレンス > 「」

flex-grow「flexアイテムの自動幅調整(伸ばす)」

flexbox(Flexible Box Layout Model)はCSS3で導入されたレイアウトモードです。
flexboxの機能一覧

「flex-grow」は、flexbox(flexコンテナ内のflexアイテム)の自動幅調整(伸ばす)を指定します。

CSS Ver.適用要素継承
3.0-不可
広告

flex-growの指定方法

構文

display : flex;
flex-grow: 数値;

プロパティ設定値意味

自動幅調整(伸ばす)

flex-grow: 値

数値flexboxアイテムを均等幅で指定数値の割合で割り当てる
数値が大きい方が割り当て幅が広くなる
延伸する長さを「flex-grow」の比率で案分して伸ばす
flex-grow
ページTOP

flex-grow のサンプル


<style type="text/css">

/* ----- flexコンテナ ----- */
.flexbox1{
  display : -webkit-box;     /* old Android */
  display : -webkit-flex;    /* Safari etc. */
  display : -ms-flexbox;     /* IE10        */
  display : flex;

  background-color  : #d4ddf8;
  width             : 270px;
  height            : 40px;
  margin            : 10px;
  padding           : 3px;
 }

/* ----- flexアイテム ----- */
.flexbox1 > div{
  margin      : 3px;
  width       : 30px;
  min-height  : 30px;
  color       : #fff;
  text-align  : center;
  line-height : 30px;
}
#id2 > div{
  -webkit-flex-grow : 1;
  -ms-flex-grow     : 1;
  flex-grow         : 1;
}
#id2 .cb{
  -webkit-flex-grow : 2;
  -ms-flex-grow     : 2;
  flex-grow         : 2;
}
#id2 .cc{
  -webkit-flex-grow : 3;
  -ms-flex-grow     : 3;
  flex-grow         : 3;
}
.contentArea{
  display   : inline-block;
  width     : 300px;
  text-align: center;
  border    : 1px solid #999;
  margin    : 3px;
  vertical-align:top;
}
.ca{background: #2d59dc;}
.cb{background: #436ae0;}
.cc{background: #597be3;}
.cd{background: #6f8de7;}
</style>

<html>

<div class="contentArea">
    <p>flex-grow指定なし</p>
    <div class="flexbox1">
        <div class="ca">A</div>
        <div class="cb">B</div>
        <div class="cc">C</div>
        <div class="cd">D</div>
    </div>
</div>

<div class="contentArea">
    <p>flex-grow指定あり</p>
    <div id="id2" class="flexbox1">
        <div class="ca">A</div>    <!-- 「flex-grow:1」が適用されている -->
        <div class="cb">B</div>    <!-- 「flex-grow:2」が適用されている -->
        <div class="cc">C</div>    <!-- 「flex-grow:3」が適用されている -->
        <div class="cd">D</div>    <!-- 「flex-grow:1」が適用されている -->
    </div>
</div>

</html>

flex-grow指定なし

A
B
C
D

flex-grow指定あり

A
B
C
D

「flex-grow」はflexboxの機能の一部となります。通常は他の機能と組み合わせて利用されます。
以下にて「flexbox」の機能をご確認ください。
flexboxの機能一覧

ページTOP

ベンダープレフィックスの使用

flexboxはCSS3で定義されています。このため、一部ブラウザによっては正常に動作しません。
対応状況→http://caniuse.com/#search=flex

このため、ベンダーフレックス「-webkit-」「-ms-」を利用した方が対応範囲が広がります。(上記サンプル参照)

広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン