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

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

りょうま(@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エンジニア/フリーランス6期目/大阪府北摂在住🏠 長野県諏訪市出身🎣学生時代に制作したサイトが評価され新卒で上場企業のWEBデザイナーとして就職。その後数社を渡り歩き、2013年にフリーランスとして独立。現在は主にフロントエンドエンジニアとしてお仕事しています。詳しいプロフィールはこちら

-HTML / CSS
-,

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