flexboxの解説

flexboxは複雑なウェブページやウェブアプリを製作するにあたりとても便利なレイアウトモジュールです。 flexboxを使用するにはflexコンテナーが不可欠であり、CSSで[display:flex]と指定すれば要素をflexコンテナーとして扱うことができるようになります。 またflexコンテナーの子要素のことをflexアイテムと言いますが、flexコンテナーの子要素であれば自動的にflexアイテムとして扱われるので特別に指定する必要はありません。

flexboxのプロパティ

  display:flex; ⇒ ブロック要素のflexコンテナーを作成する。   display:inline-flex; ⇒ インライン要素のflexコンテナーを作成する。   flex-direction ⇒ flexアイテムがflexコンテナー内で『どの方向に向かって並ぶか』ということを指定します。 flex-direction:row; ⇒ 左から右 flex-direction:row-reverse; ⇒ 右から左 flex-direction:column; ⇒上から下 flex-direction:column-reverse; ⇒ 下から上


<div class="flexbox">


<div class="item">
        1
    </div>




<div class="item">
        2
    </div>




<div class="item">
        3
    </div>


</div>


.item { 
  flex-direction: row;
}
  flex-wrap ⇒ flexコンテナーに入りきらないflexアイテムを、『そのまま一行で表示するか、折り返して複数行にするか』を指定します。 flex-wrap:nowrap; ⇒ 改行なし flex-wrap:wrap; ⇒ flexコンテナーに入るよう改行して表示(上から下) flex-wrap:wrap-reverse; ⇒ flexコンテナーに入るよう改行して表示(下から上)


<div class="flexbox">


<div class="item">
        1
    </div>




<div class="item">
        2
    </div>




<div class="item">
        3
    </div>


</div>


.item {
  flex-wrap: nowrap;
}
  flex-flow ⇒ flex-direction、flex-wrapの値をまとめて指定することができます。 flex-flow:【flex-directionの値】【flex-wrapの値】;という形で指定します。


<div class="flexbox">


<div class="item">
        1
    </div>




<div class="item">
        2
    </div>




<div class="item">
        3
    </div>


</div>


.item { 
 flex-flow: column-reverse wrap;            
}
  flex-grow ⇒ 指定した要素の大きさの比率を伸長させることができます。 flex-grow:の形で数字を指定します。 以下の例の場合、指定した要素とその他の要素の大きさの割合は3:1:1となる。


<div class="flexbox">


<div class="item">
        1
    </div>




<div class="item">
        2
    </div>




<div class="item">
        3
    </div>


</div>


.item:first-child { 
  flex-grow: 3;
}
  flex-shrink ⇒ 指定した要素の大きさの比率を縮小させることができます。 flex-shrinkはflex-wrap:nowrapと同時に使用しないと効果がありません。 また、負の値は指定できません。 以下の例の場合、指定した要素とその他の要素の大きさの割合は1:3:3となる。


<div class="flexbox">


<div class="item">
        1
    </div>




<div class="item">
        2
    </div>




<div class="item">
        3
    </div>


</div>


.item:first-child  { 
  flex-shrink: 3;
}
  flex-basis ⇒ 横幅、縦幅の比率を固定できます。 flex-directionがrow、row-reverseのときは横幅を、column、column-reverseのときは縦幅を固定します。 値として指定できるのは数値もしくは初期値であるautoのみで、負の値は指定することができません。


<div class="flexbox">


<div class="item">
        1
    </div>




<div class="item">
        2
    </div>




<div class="item">
        3
    </div>


</div>


.item:first-child{ 
  flex-basis: 30px;
}
  flex ⇒ flex-grow、flex-shrink、flex-basisの値をまとめて指定することができます。 flex:【flex-growプロパティの値】【flex-shrinkプロパティの値】【flex-basisプロパティの値】;という形で指定します。


<div class="flexbox">


<div class="item">
        1
    </div>




<div class="item">
        2
    </div>




<div class="item">
        3
    </div>


</div>


.item { 
  flex: 1 1 30px;
}
   

flexboxの現在のサポート状況

現時点では、日本で最も使用率の高いIE11(約15%)に対応できていないため、日本人向けのサイトを作成するためにflexboxを使うのは非推奨です。 今後IEへの対応やその他の不都合も改善されていくと思われるので、もうしばらく様子を見るのが良いでしょう。    

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です