ニワカが個人的に使いこなせていないCSSを覚えるための個人的メモです。
flexboxの覚書。
仕様がよく変わり、IEの対応が遅れていたこともあり便利そうだがなかなか使えませんでしたが、そろそろ使えそうな感じがしてきたので覚えておきたいです。
Flexboxとは
FlexboxはFlexible Box Layout Moduleのこと、CSS3から導入されたレイアウトモジュールでその名の通りフラキシブルにボックスレイアウトが出来ます。
色々出来る分、覚える部分は多いです。
対応ブラウザ
IEの正式対応が11から。他のブラウザもバージョンによってベンダープレフィックスが必要。まだバグみたいなのものも多い点には注意。
Flexboxの基本
Flexboxは親要素の「Flexboxコンテナー」と子要素の「Flexboxアイテム」で構成されます。
並べる要素を包括する親要素が必要になるのを忘れずに。
Flexboxで親要素の「Flexboxコンテナー」に指定するプロパティと、子要素の「Flexboxアイテム」に指定するプロパティが分かれるので注意。
これまでのdisplay要素「display:inline;」「display:inline-block;」「display:block;」「display:table;」などと同様に「display:flex;」または、「display:inline-flex;」を指定するだけです。
「display:inline-flex;」はインライン要素に使用したい時に使用。
要素名 {
display:flex;
}
または、
要素名 {
display:inline-flex;
}
Flexboxの基本の使用例
Flexboxを使用して横並びに
html
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
css
.container {
display:flex;
}
.item {
padding:10px;
background-color: red;
color:#fff;
margin-right: 10px;
}
実際の表示
親要素に「display:flex;」を指定するだけで横並びに。子要素は、わかりやすいように四角で囲みマージンを入れてます。
親要素「Flexboxコンテナー」に指定するプロパティ
- 「flex-direction」：子要素の配置方向
- 「flex-wrap」：子要素の折り返し設定
- 「flex-flow」：flex-directionとflex-wrapをまとめて指定
- 「justify-content」：水平方向の揃え方指定
- 「align-items」：垂直方向の揃え方指定
- 「align-content」：複数行になった時の揃え方指定
「flex-direction」：子要素の配置方向
子要素をどの方向に配置していくかを指定するプロパティ。横または縦に配置できます。
- row（初期値）：子要素を横並びで左から右に配置
- row-reverse：子要素を横並びで右から左に配置
- column：子要素を縦並びで上から下に配置
- column-reverse：子要素を縦並びで下から上に配置
※ほぼ使用していることはないと思いますがdirectionプロパティの値をrtl（Right To Left）を指定している時はは逆向きに配置されます。（アラビア語やヘブライ語は右から左に表記される言語らしいです。）
要素名 {
flex-direction: row;
}
要素名 {
flex-direction: row-reverse;
}
要素名 {
flex-direction: column;
}
要素名 {
flex-direction: column-reverse;
}
使用例
「flex-wrap」：子要素の折り返し設定
子要素を単一行、または複数行に並べるかを指定。単一行の場合は、親要素からはみ出ても「改行」は決してしない。複数行の場合は子要素が親要素の幅を超えてしまった場合、折り返して複数行に配置されていきます。
- nowrap（初期値）：子要素を折り返しせず、単一行に並べる
- wrap：子要素を折り返し、複数行に上から下へ並べる
- wrap-reverse：子要素を折り返し、複数行に下から上へ並べる
要素名 {
flex-wrap: nowrap;
}
要素名 {
flex-wrap: wrap;
}
要素名 {
flex-wrap: wrap-reverse;
}
使用例
個人的メモ：単一行ではみ出すのがまだよくわからず。
「flex-flow」：flex-directionとflex-wrapをまとめて指定
「flex-direction」と「flex-wrap」を一行で指定できるプロパティ。初期値は row nowrap。
backgroundでまとめて指定するような感じ。
コード例
要素名 {
flex-flow: row wrap;
}
「justify-content」：水平方向の揃え方指定
親要素に空きスペースがあった場合、子要素を水平方向のどの位置に配置するかを指定します。
- flex-start（初期値）：行の開始位置から配置。左揃え。（縦配置の場合、「上揃え」）
- flex-end：行末から配置。右揃え。（縦配置の場合「下揃え」）
- center：中央揃え
- space-between：最初と最後の子要素を両端に配置し、残りの要素は均等に間隔をあけて配置
- space-around：両端の子要素も含め、均等に間隔をあけて配置（左右の端の要素は半分ずつ間隔が空く）
要素名 {
justify-content: flex-start;
}
要素名 {
justify-content: flex-end;
}
要素名 {
justify-content: center;
}
要素名 {
justify-content: space-between;
}
要素名 {
justify-content: space-around;
}
使用例
子要素の並ぶ順序は「flex-direction」で指定した配置方向なので変わらない。
「align-items」：垂直方向の揃え方指定
「justify-content」と同様、親要素に空きスペースがあった場合、子要素を垂直方向のどの位置に配置するかを指定します。
- stretch（初期値）：親要素の高さ、またはコンテンツの一番多い子要素の高さに合わせて広げて配置
- flex-start：親要素の開始位置から配置。横配置の場合「上揃え」、縦配置の場合「左揃え」
- flex-end ：親要素の終点から配置。横配置の場合「下揃え」、縦配置の場合「右揃え」
- center：中央揃え
- baseline：ベースラインで揃える
要素名 {
align-items: stretch;
}
要素名 {
align-items: flex-start;
}
要素名 {
align-items: flex-end;
}
要素名 {
align-items: center;
}
要素名 {
align-items: baseline;
}
使用例
個人的メモ：stretchは役立つ場面も多そう。
「align-content」：複数行になった時の揃え方指定
子要素が複数行に渡った場合の垂直方向の揃えを指定。
「flex-wrap」で「nowrap」以外に設定した場合のみ有効。
- stretch（初期値）：親要素の高さに合わせて広げて配置
- flex-start：親要素の開始位置から配置。横配置の場合「上揃え」、縦配置の場合「左揃え」
- flex-end ：親要素の終点から配置。横配置の場合「下揃え」、縦配置の場合「右揃え
- center：中央揃え
- space-between：最初と最後の子要素を上下の端に配置し、残りの要素は均等に間隔をあけて配置
- space-around：上下端にある子要素も含め、均等に間隔をあけて配置。上下の端の行にも半分ずつ間隔を空ける。
要素名 {
align-content: stretch;
}
要素名 {
align-content: flex-start;
}
要素名 {
align-content: flex-end;
}
要素名 {
align-content: center;
}
要素名 {
align-content: space-between;
}
要素名 {
align-content: space-around;
}
使用例
子要素「Flexboxアイテム」に指定するプロパティ
display: flex; が指定された要素の中にある子要素（Flexアイテム）に指定するプロパティです。親要素に display: flex; が指定されていないと動作しないので注意。
- 「order」：順番の指定
- 「flex-grow」：子要素の伸びる比率指定
- 「flex-shrink」：子要素の縮む比率指定
- 「flex-basis」：子要素のベースとなる幅の指定
- 「flex」：flex-grow、flex-shrink、flex-basisをまとめて指定
- 「align-self」：子要素の垂直方向の揃え方指定
「order」：順番の指定
子要素は通常HTMLの記述順に配置されますが、orderプロパティを使えば任意の順で並べ替えられます。
要素名 {
order: 2;
}
要素名 {
order: 3;
}
要素名 {
order: 1;
}
使用例
「flex-grow」：子要素の伸びる比率指定
親要素に余ったスペースがあった場合、指定のある子要素が他の子要素に対してどれくらい伸びるかを指定します。
初期値は0。マイナス値は無効。
要素名 {
flex-grow: 2;
}
要素名 {
flex-grow: 3;
}
要素名 {
flex-grow: 1;
}
使用例
個人的メモ：全ての子要素に「flex-grow」を指定した場合のそれぞれの割合は、それぞれに指定した数字を全部足して、指定した数字で割った割合が幅になる感じかと。
「flex-shrink」：子要素の縮む比率指定
flex-growと逆に親要素に余ったスペースがなく、すべての子要素が入り切らない場合、指定のある子要素が他の子要素に対してどれくらい縮むかを指定します。
初期値は1。マイナス値は無効。
要素名 {
flex-shrink: 2;
}
要素名 {
flex-shrink: 3;
}
要素名 {
flex-shrink: 1;
}
使用例
flexコンテナーが全てのFlexアイテムを格納し切れない場合、各自の「flex-shrink」プロパティに従い、ちょうど格納できるように、自動的に縮む。数字が大きいほど縮む。数値が0を指定した場合は元のサイズでの表示され伸縮しない。
「flex-basis」：子要素のベースとなる幅の指定
子要素に対しwidthと同じように幅の値を指定できます。autoと指定した場合は子要素のコンテンツのサイズが適応されます。
ベースとなる長さ、或いは「最小の長さ」を設定できるということ。
初期値は auto 。幅や高さの指定と同様、パーセンテージやピクセル値で指定できます。
要素名 {
flex-basis: auto;
}
要素名 {
flex-basis: 200px;
}
要素名 {
flex-basis: 30%;
}
使用例
個人的メモ：ベースとなる幅の指定で、必ずしも指定のサイズになるわけではない。
「flex」：flex-grow、flex-shrink、flex-basisをまとめて指定
flex-grow、flex-shrink、flex-basis の3つのプロパティーを一行で指定できます。初期値は 0 1 auto。「none」と指定した場合、 ‘0 0 auto’と見なされる。
backgroundで背景関連を一括で指定するような感じ。
要素名 {
flex: 0 1 30%;
}
使用例
個人的メモ：まだ、全然理解できてないです。
「align-self」：子要素の垂直方向の揃え方指定
親要素に空きスペースがあった場合、子要素を垂直方向のどの位置に配置するかを指定します。親要素に指定する align-items と全く同じ機能で、こちらは子要素に対して指定。この align-self での指定は、親要素に記述する align-items よりも優先される。
- auto（初期値）：親要素の align-items の値を継承。align-items の初期値は stretch。
- stretch：親要素の高さ、またはコンテンツの一番多い子要素の高さに合わせて広げて配置
- flex-start：親要素の開始位置から配置。上揃え
- flex-end：親親要素の終点から配置。下揃え。
- center：中央揃え
- baseline：ベースラインで揃える
要素名 {
align-self: auto;
}
要素名 {
align-self: stretch;
}
要素名 {
align-self: flex-start;
}
要素名 {
align-self: flex-end;
}
要素名 {
align-self: center;
}
要素名 {
align-self: space-between;
}
使用例
個人的メモ：baselineがどこ基準なのかまだよくわからない。
参照ページ
記事にする際に参考にさせていただいたページ。
