りょうま(@ytq_ryoma)です。
ランディングページなどをコーディングをしていて、よくつまづいてしまうポイント。
「横並びしたボックスの高さがあわない・・・」
この悩みは必ずといっていいほど多くの方が直面します。
でも安心してください！flexboxプロパティを使えば、親要素はもちろん、子要素の高さもぴったり揃えることができます！
flexboxとはフレキシブルなレイアウトを可能にするプロパティ
レスポンシブデザインがない一昔前は、floatプロパティを使って横並びを実現していました。
そんでもって高さの違うボックスは、「heightLine.js 」を使って・・・シュコシュコ
といった具合に、JSを組み合わせて横並びボックスの高さを揃えていました。
しかしフレキシブルで簡単に横並びのレイアウトができてしまうところがflexboxのいいところ。
悩ましかった横並びレイアウト、しかも高さが文字量によって異なる・・・
このような悩みはflexboxを使ってみるととっても簡単にレイアウトすることができます。
サンプル① 通常の横並びボックス
まずは簡単に横並びボックスを作ってみたいと思います。
シンプルな横並びボックスです。
ul.listに対して
display:flex;を指定しました。
すっごい単純な構造なので、HTMLやCSSにとくに難しいところはありません。
文字数の違いはあっても横並びボックス（グレー背景）の高さが揃っていますね。
サンプル② 子要素入り横並びボックス
もう少し実践的なものをつくりました。
横並びボックスの中に子要素（サムネ画像、タイトル、説明文、SNSリンク）を設けました。
親要素（緑の背景）は高さが揃っていますが、子要素は高さがそろってません。
このままでは少々不格好なので、この子要素の中のSNSリンクをボトム揃えにしてみます。
サンプル③ 子要素入り横並びボックス(子要素高さ揃え)
SNS要素をボトム揃えにしました。
今度はさらに具体的には、li.list（緑背景のボックス）に対して、
display: flex;
flex-direction: column;を加えます。
さらにsns要素（黄色テキスト）に対して、
margin-top: auto;を加えました。
この方法を使えば、横並び、さらに縦並びのインナーボックスの高さもきれいに揃えることができます。
これを応用すればフレキシブルなボックスでも上手に配置できますね。
皆さんもぜひぜひ使ってみてください。
