さてさて、昨日に引き続きフレックスボックスをまとめていきます。
本日の内容でフレックスボックスが半分、一段落といった所でしょうか。
参考までに前日までのリンクを貼っておきます。
39.フレックスボックスを使う ～レイアウトの大きな手助け～ - web制作のしおり
40.フレックスボックスを使う② ～できることはたくさん～ - web制作のしおり
では早速やっていきましょう。
縦方向の配置場所を制御 ～align-items～
昨日の記事で学習した、justify-contentというプロパティは横方向の配置場所を制御していました。
このalign-itemsプロパティは縦方向の配置場所を制御します。
align-items : stretch;
これは子要素の中でheightが最大の要素の高さに合せて、
子要素達の高さを揃えます。これがデフォルトで設定されています。
ここで疑問が１つ、そもそもブロック要素を入れる前提でやっていますが、
インライン要素を混ぜたらどうなるのか。
・・・これは記事の最後に調査結果を書くとします。
align-items : flex-start;
これは子要素をフレックスボックスの上に揃えます。
エクセルの文字を「上揃え」と同じイメージだと思います。
align-items : flex-end;
こちらは子要素をフレックスボックスの下に揃えます。
子要素全てがフレックスボックスの高さより小さい場合は、
上側に空白の領域ができます。
align-items : center;
子要素の高さの中心と、フレックスボックスの高さの中心位置を揃えます。
簡単に上下の中央配置ができます。
align-items : baseline;
子要素の中のテキストの1行目の、テキストの下側基準で高さを合せます。
下図、赤線の部分です。
このプロパティはフォントサイズや子要素の高さ、padding等の設定により、
レイアウトが崩れやすそうなので注意が必要ですね。
お疲れ様でした。ここまでで、ようやくフレックスボックスの
フレックスボックスに対して設定するプロパティは一応終了です。
フレックスボックスのプロパティまとめ ～デフォルト設定を知ろう～
ここまでフレックスボックスに対して設定するプロパティを学習してきました。
最後にデフォルト設定をまとめたいと思います。
今一度、学習したプロパティを確認します。
ですね。
このうち、「flex-flow」に関しては除外します。
なぜなら、「flex-flow」は「flex-direction」と「flex-wrap」をまとめて指定するだけのもの。
つまり、まとめて指定できるだけで、「デフォルト値はない」のです。
では各プロパティのデフォルト値をまとめます。
以上です。
何故これを書いたのかと言えば、
display : flex; を設定した瞬間に
「どんなレイアウトになるのか」がわかるようになるからです。
それが上記で示したデフォルト値です。
ですので、display : flex;とした場合に
子要素は左寄せで、(justify-content : flex-start;)
左から右へ配置され、(flex-direction : row;)
フレックスボックスの幅に収まらない場合は縮小され、(flex-wrap : nowrap;)
height最大値の子要素と同じ高さになる。(align-items : stretch;)
こういうレイアウトになるということですね。
謎がとけてスッキリです。
フレックスボックスを使うときには、この初期状態から
「どうしたいか」で設定するプロパティを考えて使っていきたいです。
今日のまとめ
- align-itemsは縦方向の配置を制御する。場合によっては子要素の高さが変わる。
- display : flex;で子要素がどんな動きをするのかはデフォルト値でわかる。
ようやく、フレックスボックスのモヤモヤした部分が解消されました。
デフォルト値、大事ですね。
明日はフレックスボックスの子要素(フレックスアイテム)に対して
指定するプロパティについてまとめていきます。
では、また。
余談（調査結果）
そもそもフレックスボックスの中にはブロック要素を入れる前提で
話をすすめていますが、インライン要素を混ぜたらどうなるのか。
何故かと言えば、
インライン要素の性質は「幅は内容に追従」し、「高さは指定できない」というもの。
align-items : stretch;とは相容れない存在のハズ…。
試してみましょう。
HTMLコードは下記
<div class="box__flex-test">
<div class="child height-m">子要素1</div>
<div class="child">子要素2</div>
<span>子要素span</span>
<p>子要素p</p>
<div class="child">子要素3</div>
</div>
spanタグのみの子要素と、ついでにpタグも混ぜてみました。
heightを子要素1だけに設定する為に、
CSSでheight-mクラスにheight : 300px;を設定。
その他にはheigt指定なし。
結果がこちら
ちゃんと縦方向に伸びてますね。
Chromeの検証ツールで確認しても、全ての要素のheightが300pxになっています。
spanタグも高さがある。
display : block;とかが適用されているわけでは無いのです。
何故！インライン要素の高さがあるのか…。
調べてみたんですが、さっと答えに辿り着けなかった・・・
が、あきらめずに調べているとW3Cのflexboxのページに
Each in-flow child of a flex container becomes a flex item, and each contiguous sequence of child text runs is wrapped in an anonymous block container flex item.
下線部のようにありましたので、どうやら「子要素は見えないブロック要素に内包される」ということのようです。
ですので、先程のspanタグは「見えないブロック要素で包まれている」ということのようです。
であれば、ひとまず納得です。
※間違ってたら教えてください。