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

flex-shrink「flexアイテムの自動幅調整(縮む)」

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

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

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

flex-shrinkの指定方法

構文

display : flex;
flex-shrink: 数値;

プロパティ設定値意味

自動幅調整(縮む)

flex-shrink: 値

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

flex-shrink のサンプル


<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;
  height      : 30px;
  width       : 100px;
  color       : #fff;
  text-align  : center;
  line-height : 30px;
}
#id2 > div{
  -webkit-flex-shrink : 1;
  -ms-flex-shrink     : 1;
  flex-shrink         : 1;
}
#id2 .cb{
  -webkit-flex-shrink : 2;
  -ms-flex-shrink     : 2;
  flex-shrink         : 2;
}
#id2 .cc{
  -webkit-flex-shrink : 3;
  -ms-flex-shrink     : 3;
  flex-shrink         : 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-shrink指定なし</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-shrink指定あり</p>
    <div id="id2" class="flexbox1">
        <div class="ca">A</div>    <!-- flex-shrink:1 が適用されている -->
        <div class="cb">B</div>    <!-- flex-shrink:2 が適用されている -->
        <div class="cc">C</div>    <!-- flex-shrink:3 が適用されている -->
        <div class="cd">D</div>    <!-- flex-shrink:1 が適用されている -->
    </div>
</div>

</html>

flex-shrink指定なし

A
B
C
D

flex-shrink指定あり

A
B
C
D

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

ページTOP

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

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

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

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