flexboxを使いこなす!CSSで高さが違う横並びボックスの高さをぴったり揃える簡単な方法

投稿日:2018年12月13日 更新日:

りょうま(@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;

を加えました。

この方法を使えば、横並び、さらに縦並びのインナーボックスの高さもきれいに揃えることができます。

これを応用すればフレキシブルなボックスでも上手に配置できますね。

皆さんもぜひぜひ使ってみてください。

正直これはめっちゃ使う!
これ意外と知らない人多いんやで

 

関連するおすすめ記事

Amazonチャージ


Amazonで買い物するなら、Amazonチャージを利用しよう!

チャージごとに、プライム会員なら最大2.5%Amazonポイントが貯まる!

クレジットカードがなくてもOK! Amazonギフト券チャージでお得にお買い物しよう!

さっそくチャージする

  • この記事を書いた人

りょうま

WEBエンジニア/フリーランス5期目/大阪府北摂在住🏠長野県諏訪市出身🎣webデザインやフロントエンド技術の情報を中心に、人生をカスタマイズして楽しく過ごすための情報を発信中📢WPテーマはAFFINGER5です。

-HTML / CSS
-,

Copyright© ヤッテモータース , 2019 All Rights Reserved.