uncode アンコード

アンコード　タケです。

先日、宮島観光してきました。地元民と行って来たのですが、近すぎて宮島行く事がなかったけど、こう観光してみると宮島いいなぁ。っと言っておりました。カープ頑張れ、そして、広島に乾杯！

 Flexboxとは

FlexboxとはFlexible Box Layout Moduleのことで、

CSS3の新しいレイアウトモジュールになります。フレキシブルで簡単にレイアウトが組めちゃう素敵ボックスになりますので。今回、そのフレックスボックスについて紹介したいと思います。

flexレイアウトはフレックスコンテナ（親要素）と、フレックスアイテム（子要素）で構成されています。その親要素にdisplay:flexを設定する事によって、フレックスコンテナ内の子要素をflexアイテムとされます。

対応ブラウザ

現行のモダンブラウザーでは問題なく利用できます。ただし、Safari用に -webkit- のベンダープレフィックスが必要です。

Flexのサポート状況一覧

flexbox使い方

flexboxレイアウトを使用するには、htmlの親要素のdisplayプロパティにflexを指定するだけです。

.flex-container{
display: -webkit-flex; /*safari*/
display flex;
}

または、インライン要素のように表示する場合は次のようにします。

.flex-container {
    display: -webkit-inline-flex; /* Safari */
    display: inline-flex;
}

そうすると、横並びになるはずです。

flex-direction

このプロパティはflexkコンテナの主軸の方向を設定する事により、どのように配置されるかを表します。

row

左から右へ水平方向に配置されます。

.flex-container {
    -webkit-flex-direction: row; /* Safari */
    flex-direction:         row;
}

row-reverse

右から左へ水平方向に配置されます。

.flex-container {
    -webkit-flex-direction: row-reverse; /* Safari */
    flex-direction:         row-reverse;
}

column

上から下へ垂直方向に配置されます。

.flex-container {
    -webkit-flex-direction: column; /* Safari */
    flex-direction:         column;
}

column–reverse

下から上へ垂直方向に配置されます。

.flex-container {
    -webkit-flex-direction: column-reverse; /* Safari */
    flex-direction:         column-reverse;
}

flex-wrap

アイテムの改行設定になります。flexコンテナが複数のアイテムを一行、または複数行に配置することをコントロールできます。

nowrap

幅に合わせて縮む、改行させない（初期値）各アイテムの幅はflexコンテナの幅に収まるように縮小されます。

.flex-container {
    -webkit-flex-wrap: nowrap; /* Safari */
    flex-wrap:         nowrap;
}

wrap

改行されて、横複数行に配置されます。

.flex-container {
    -webkit-flex-wrap: wrap; /* Safari */
    flex-wrap:         wrap;
}

wrap-reverse

逆方向に改行させる。

.flex-container {
    -webkit-flex-wrap: wrap-reverse; /* Safari */
    flex-wrap:         wrap-reverse;
}

justify-content

アイテムの横方向の位置揃え。要素と要素の間や、表示位置をカスタマイズできます。

flex-start

左揃え（初期値）

.flex-container {
    -webkit-justify-content: flex-start; /* Safari */
    justify-content:         flex-start;
}

flex-end

右揃え

.flex-container {
    -webkit-justify-content: flex-end; /* Safari */
    justify-content:         flex-end;
}

center

左右中央揃え

.flex-container {
    -webkit-justify-content: center; /* Safari */
    justify-content:         center;
}

space-between

両端揃えで均等間隔

.flex-container {
    -webkit-justify-content: space-between; /* Safari */
    justify-content:         space-between;
}

space-around

各アイテム左右に均等な余白。両端揃えで均等間隔かつ両端に半分の間隔をあけてくれる。

.flex-container {
    -webkit-justify-content: space-around; /* Safari */
    justify-content:         space-around;
}

align-items

アイテム全体、縦方向の位置揃え（flexコンテナの内側上下を調整）

stretch

上下揃え（高さいっぱい）

.flex-container {
    -webkit-align-items: stretch; /* Safari */
    align-items:         stretch;
}

flex–start

上揃え（初期値）

.flex-container {
    -webkit-align-items: flex-start; /* Safari */
    align-items:         flex-start;
}

flex–end

下揃え

.flex-container {
    -webkit-align-items: flex-end; /* Safari */
    align-items:         flex-end;
}

center

上下中央揃え

.flex-container {
    -webkit-align-items: center; /* Safari */
    align-items:         center;
}

baseline

アイテム内要素（テキスト等）のラインを揃える

.flex-container {
    -webkit-align-items: baseline; /* Safari */
    align-items:         baseline;
}

align-content

アイテム自体の縦方向の位置揃え（flexアイテムの上下を調整）このプロパティは「justify-content」と似ていますが、「align-content」プロパティはクロス軸の垂直方向に揃えて配置します。

stretch

上下揃え（高さいっぱい）フレックスコンテナのクロス軸の幅に合わせて伸縮して表示されます。

.flex-container {
    -webkit-align-content: stretch; /* Safari */
    align-content:         stretch;
}

flex–start

上揃え（初期値）フレックスコンテナのクロス軸の起点に揃えます。通常、上端に配置されます。

.flex-container {
    -webkit-align-content: flex-start; /* Safari */
    align-content:         flex-start;
}

flex–end

下揃え

.flex-container {
    -webkit-align-content: flex-end; /* Safari */
    align-content:         flex-end;
}

center

上下中央揃え

.flex-container {
    -webkit-align-content: center; /* Safari */
    align-content:         center;
}

space–between

上下揃え

.flex-container {
    -webkit-align-content: space-between; /* Safari */
    align-content:         space-between;
}

space–around

アイテム上下に均等余白

.flex-container {
    -webkit-align-content: space-around; /* Safari */
    align-content:         space-around;
}