CodeCode

なんか色々おぼえ書き。だいたいweb制作関連。

Flexboxの備忘録

目次

Flexboxとは

Flexboxとは、スクリーンサイズに応じて、ページ上の要素が指定した通りに配置されるレイアウト方法です。 仕様では、Webアプリのインターフェース設計用に最適化されたCSSのボックスモデルとなっていますが、スマートフォンやタブレットなど多くのスクリーンサイズにフレキシブルに対応する場合に使えます。 ようするに、レスポンシブWebデザインととても相性がいいのです。

ブラウザの対応状況

Can I use…を見てみると、モダンブラウザではほぼ使用可能です。 以前は、IE8,9などの影響でまだ使える状況が限られていましたが、IEのサポートポリシーの変更でWindows VistaのIE9を除けば、普段の業務でも利用しやすい状況になりました。

Flexboxの使い方

Flexboxレイアウトは、Flex itemという子要素とそれらを内包する、Flex boxという親要素からできています。 flexboxレイアウトを使うには、フレキシブル要素の親要素のdisplay:flexを指定するだけです(iOS Safariはベンダープレフィックスが必要)。 
.flex_box{
    display: -webkit-flex;
    display:flex;
}
デモ これで、Flexboxを扱う準備ができました。

flex-direction

このプロパティで子要素(Flex item)の配置を決めます。 row
子要素がHTMLに記述された順に横に並んで配置されます。 
.flex_box{
    -webkit-flex-direction: row;
  flex-direction: row;
}
column
子要素がHTMLに記述された順に縦に配置されます。 
.flex_box{
    -webkit-flex-direction: column;
  flex-direction: column;
}
デモ row-reverse
子要素がHTMLに記述された順とは逆順で横に並んで配置されます。 
.flex_box{
    -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse;
}
デモ column-reverse 子要素がHTMLに記述された順とは逆順で縦に配置されます。 
.flex_box{
    -webkit-flex-direction: column-reverse;
  flex-direction: column-reverse;
}
デモ

flex-wrap

flex-wrapは子要素の折り返しを設定します。 nowrap
折り返さず、横一行に配置されます。 
.flex_box{
    -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
}
デモ wrap
横複数行に配置されます。 
.flex_box{
    -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
デモ wrap-reverse
HTMLに記述された順とは逆順で横複数行に配置されます 
.flex_box{
    -webkit-flex-wrap: wrap-reverse;
  flex-wrap: wrap-reverse;
}
デモ

flex-flow

flex-directionとflex-wrapのショートハンドです。 逆順で横に複数行 
.flex_box{
    -webkit-flex-flow:row-reverse wrap-reverse;
    flex-flow:row-reverse wrap-reverse;
}

justify-content

親要素の水平方向に沿って子要素配置します。 flex-start
親要素の左側に配置します。 
.flex_box{
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}
デモ flex-end
親要素の右側に配置します。 
.flex_box{
    -webkit-justify-content: flex-endt;
    justify-content: flex-end;
}
デモ center
親要素の左右中央に配置されます。 
.flex_box{
    -webkit-justify-content: center;
    justify-content: center;
}
デモ space-between
最初の子要素は左端に、最後の子要素は右端に配置され、その他の要素は等間隔に配置されます。 
.flex_box{
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
デモ space-around
space-between とは違い術との要素が等間隔に配置されます。 
.flex_box{
    -webkit-justify-content: space-around;
    justify-content: space-around;
}
デモ

align-items

justify-content に似ていますが、親要素の垂直方向に沿って子要素配置します。 今までは難しかった天地中央揃えが簡単に実装できます。 flex-start
親要素の上側に配置します。 
.flex_box{
    -webkit-align-items: flex-start;
    align-items: flex-start;
}
デモ flex-end
親要素の下側に配置します。 
.flex_box{
    -webkit-align-items: flex-end;
    align-items: flex-end;
}
デモ center
親要素の天地中央に配置します。 
.flex_box{
    -webkit-align-items: center;
    align-items: center;
}
デモ < p>天地左右中央揃えをする場合
.flex_box{
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}
デモ baseline
親要素のベースラインに沿って配置します。 
.flex_box{
    -webkit-align-items: baseline;
    align-items: baseline;
}
デモ stretch
親要素の高さいっぱいに配置します。 
.flex_box{
    -webkit-align-items: stretch;
    align-items: stretch;
}
デモ

align-content

名前が似ているので紛らわしいですが、align-items とは違い複数行の配置を決定します。 とる値はjustify-contentと同じです。 justify-content の縦バージョンと思ってもらえればいいと思います。 flex-start
親要素の上側にまとまって配置します。 
.flex_box{
    -webkit-align-content: flex-start;
    align-content: flex-start;
}
デモ flex-end
親要素の下側にまとまって配置します。 
.flex_box{
    -webkit-align-content: flex-end;
    align-content: flex-end;
}
デモ center
親要素の天地中央にまとまって配置します。 
.flex_box{
    -webkit-align-content: center;
    align-content: center;
}
デモ space-between
最初の子要素は上に、最後の子要素は下に配置され、その他の要素は等間隔に配置されます。 
.flex_box{
    -webkit-align-content: space-between;
    align-content: space-between;
}
デモ space-around
要素が等間隔に配置されます。 
.flex_box{
    -webkit-align-content: space-around;
    align-content: space-around;
}
デモ ここからは子要素に設定するプロパティです。

flex-grow

子要素の伸び幅を決定します。 横幅いっぱいに伸ばすサイズは値によって配分されます。 
.flex_item{
    -webkit-flex-grow: 1;
  flex-grow: 1;
}
デモ

flex-shrink

flex-grow とは逆に子要素の縮み幅を決定します。 親要素に入りきらない場合、値によって自動的に縮む。 
.flex_item{
    -webkit-flex-shrink: 1;
  flex-shrink: 1;
}
デモ

flex-basis

子要素の最初のサイズを元に、幅と高さのプロパティを同じ値にします。 
.flex_item{
    -webkit-flex-basis: 200px;
  flex-basis: 200px;
}
デモ

flex

flex-grow, flex-shrink, flex-basis のショートハンドです。 
.flex_item{
    -webkit-flex: 1 1 200px;
  flex: 1 1 200px;
}
デモ

align-self

子要素の整列をalign-itemsでの指定より優先します。 個別にalign-itemsを設定することができます。 値はalign-itemsを参照。
  • flex-start
  • flex-end
  • center
  • baseline
  • stretch

order

子要素の並ぶ順番を決定します。 初期値は0です。 
.flex_item{
    -webkit-order: 1;
  order: 1;
}
デモ

注意

float や clear や vertical-align はFlex itemに影響を与えません。

Flexbox Playground

Flexboxの実験ができます。
Flexbox Playground

FLEXBOX FROGGY

Flexboxをゲーム感覚で遊びながら学べます。
FLEXBOX FROGGY

まとめ

ややこしいところもいくつかありましたが、それが理解できればこれからの強力な助けとなるでしょう。 Flexboxの実験ができたり、ゲーム感覚で学べるサイトがあるので活用してみて理解を深めてください。
トップへ戻る