display: flexの個人的整理
使うたびに色々なサイトを巡ってしまうのもアレなので、自分のページのサイト内検索で済むようにしたくてここに整理しておく。
詳細はMDNのフレックスボックスのガイドページを見るべき。 ここ:CSS フレックスボックスレイアウト - CSS: カスケーディングスタイルシート | MDN
フレックスボックスの定義
まずは定義のための記述から。
親で指定するもの
親は普通フレックスコンテナと呼ばれる。打つのが面倒なのでここでは親と記述している事が多い。
flex自体の設定と、主軸の向き、折り返しの設定。後者2個はflex-flowで一括指定する:
.flex-container {
display: flex;
flex-flow: <direction> <wrap>;
}<direction>は主軸の向きの指定であり、指定できるのは、row/column/row-reverse/column-reverseのうちの1つ。
<wrap>は折り返しの指定であり、指定できるのは、no-wrap/wrapのうちの1つ。
子で指定するもの
子は普通フレックスアイテムと呼ばれる。打つのが面倒なので（以下略）。
3つを指定するが、普通は一括指定のflexを使う:
.flex-item {
/* ここに指定してもいいが… */
flex-basis: <length>;
flex-grow: <number>;
flex-shrink: <number>;
/* 以下のうちの1つの指定で十分。 */
flex: grow | basis;
flex: grow | shrink;
flex: grow | shrink | basis;
}flex-basisは主軸方向（だと思う）の初期の寸法。単位などを指定できる。初期値はauto。省略時の規定値は1。MDNには、フレックスアイテムの主要部分の初期の寸法を設定と書かれている。
flex-growは主軸方向の残り空間の分配に使う。初期値は0で分配しない。数字が大きいほど伸長する。重み。省略時の規定値は1。
flex-shrinkはすべての子の寸法の合計が親の寸法より大きいとき、縮小するのに使う係数。初期値は1。省略時の規定値も1。
定義済みの値を利用するのがいい
flexは自分で細かく設定できるが、便利な定義済みの値を利用するのがいい。
.flex-item {
flex: initial;
flex: auto;
flex: none;
flex: <正の数>;
}flex: initial; === flex: 0 1 auto;なので、縮小はするが伸長はしない。
flex: auto; === flex: 1 1 auto;なので、縮小も伸長もする。
flex: none; === flex: 0 0 auto; なので、縮小も伸長もせずに大きさ固定。
フレックスボックスの最低限の定義は以上。残りはそのほかの設定を整理していく。
位置合わせ
親に対する子の位置どり。主軸・交差軸の始端・終端・中央など指定できる。MDNでは配置プロパティというようだ。（ここでは関係ないがグリッドレイアウトでも使用する。）
だいたい親で定義できる。子にそれぞれ定義する場合は、子に定義もできる。
.flex-container {
align-items: <value>;
justify-content: <value>;
}align-itemsは親で指定し、交差軸方向の子の位置合わせを行う。指定できる値は、stretch/flex-start/flex-end/centerなど。それぞれの子の領域で、交差軸方向のどの位置に配置するか指定できる。
子で個別に指定する場合は、align-selfを利用できる。指定可能な値は同じ。
justify-contentは親で指定し、主軸方向の子の位置合わせを行う。指定できる値は、flex-start/flex-end/center/space-around/space-between/space-evenlyなど。
flex-growが0以外の子があると、利用可能なスペースがないため、このプロパティの効果がなくなるようだ。
とりあえずこのくらいでまとめておく。また調べるような事があれば、ここにまとめておきたい。
以上です。
紙媒体のがいいかも（兼広告）
