uncode Official Blog
2017年9月12日
Web
アンコード タケです。
先日、宮島観光してきました。地元民と行って来たのですが、近すぎて宮島行く事がなかったけど、こう観光してみると宮島いいなぁ。っと言っておりました。カープ頑張れ、そして、広島に乾杯!
FlexboxとはFlexible Box Layout Moduleのことで、
CSS3の新しいレイアウトモジュールになります。フレキシブルで簡単にレイアウトが組めちゃう素敵ボックスになりますので。今回、そのフレックスボックスについて紹介したいと思います。
flexレイアウトはフレックスコンテナ(親要素)と、フレックスアイテム(子要素)で構成されています。その親要素にdisplay:flexを設定する事によって、フレックスコンテナ内の子要素をflexアイテムとされます。
現行のモダンブラウザーでは問題なく利用できます。ただし、Safari用に -webkit-
のベンダープレフィックスが必要です。
flexboxレイアウトを使用するには、htmlの親要素のdisplayプロパティにflexを指定するだけです。
.flex-container{ display: -webkit-flex; /*safari*/ display flex; }
または、インライン要素のように表示する場合は次のようにします。
.flex-container { display: -webkit-inline-flex; /* Safari */ display: inline-flex; }
そうすると、横並びになるはずです。
このプロパティはflexkコンテナの主軸の方向を設定する事により、どのように配置されるかを表します。
左から右へ水平方向に配置されます。
.flex-container { -webkit-flex-direction: row; /* Safari */ flex-direction: row; }
右から左へ水平方向に配置されます。
.flex-container { -webkit-flex-direction: row-reverse; /* Safari */ flex-direction: row-reverse; }
上から下へ垂直方向に配置されます。
.flex-container { -webkit-flex-direction: column; /* Safari */ flex-direction: column; }
下から上へ垂直方向に配置されます。
.flex-container { -webkit-flex-direction: column-reverse; /* Safari */ flex-direction: column-reverse; }
アイテムの改行設定になります。flexコンテナが複数のアイテムを一行、または複数行に配置することをコントロールできます。
幅に合わせて縮む、改行させない(初期値)各アイテムの幅はflexコンテナの幅に収まるように縮小されます。
.flex-container { -webkit-flex-wrap: nowrap; /* Safari */ flex-wrap: nowrap; }
改行されて、横複数行に配置されます。
.flex-container { -webkit-flex-wrap: wrap; /* Safari */ flex-wrap: wrap; }
逆方向に改行させる。
.flex-container { -webkit-flex-wrap: wrap-reverse; /* Safari */ flex-wrap: wrap-reverse; }
アイテムの横方向の位置揃え。要素と要素の間や、表示位置をカスタマイズできます。
左揃え(初期値)
.flex-container { -webkit-justify-content: flex-start; /* Safari */ justify-content: flex-start; }
右揃え
.flex-container { -webkit-justify-content: flex-end; /* Safari */ justify-content: flex-end; }
左右中央揃え
.flex-container { -webkit-justify-content: center; /* Safari */ justify-content: center; }
両端揃えで均等間隔
.flex-container { -webkit-justify-content: space-between; /* Safari */ justify-content: space-between; }
各アイテム左右に均等な余白。両端揃えで均等間隔かつ両端に半分の間隔をあけてくれる。
.flex-container { -webkit-justify-content: space-around; /* Safari */ justify-content: space-around; }
アイテム全体、縦方向の位置揃え(flexコンテナの内側上下を調整)
上下揃え(高さいっぱい)
.flex-container { -webkit-align-items: stretch; /* Safari */ align-items: stretch; }
上揃え(初期値)
.flex-container { -webkit-align-items: flex-start; /* Safari */ align-items: flex-start; }
下揃え
.flex-container { -webkit-align-items: flex-end; /* Safari */ align-items: flex-end; }
上下中央揃え
.flex-container { -webkit-align-items: center; /* Safari */ align-items: center; }
アイテム内要素(テキスト等)のラインを揃える
.flex-container { -webkit-align-items: baseline; /* Safari */ align-items: baseline; }
アイテム自体の縦方向の位置揃え(flexアイテムの上下を調整)このプロパティは「justify-content」と似ていますが、「align-content」プロパティはクロス軸の垂直方向に揃えて配置します。
上下揃え(高さいっぱい)フレックスコンテナのクロス軸の幅に合わせて伸縮して表示されます。
.flex-container { -webkit-align-content: stretch; /* Safari */ align-content: stretch; }
上揃え(初期値)フレックスコンテナのクロス軸の起点に揃えます。通常、上端に配置されます。
.flex-container { -webkit-align-content: flex-start; /* Safari */ align-content: flex-start; }
下揃え
.flex-container { -webkit-align-content: flex-end; /* Safari */ align-content: flex-end; }
上下中央揃え
.flex-container { -webkit-align-content: center; /* Safari */ align-content: center; }
上下揃え
.flex-container { -webkit-align-content: space-between; /* Safari */ align-content: space-between; }
アイテム上下に均等余白
.flex-container { -webkit-align-content: space-around; /* Safari */ align-content: space-around; }