ボックスの高さを揃える

2018.03.26

横並びのボックスの高さ(下辺)を揃えたい時は、Flexboxを使うと高さを揃えることが可能です。

文字数などで高さがばらばらのボックスを高さを揃えて配置したいときなどに便利です。

例えば、float: left; で横並びのボックスを配置した時、文章量などが変わるとボックスの高さがバラバラで揃いません。

そんな時、Flexbox を使うと、文字量が多いボックスの高さにに他のボックスの高さが揃ってくれるのです。

■html

  <ul class="box">
    <li>
      <p><img src="img/img01"></p>
      <p>テキストテキストテキストテキスト</p>
    </li>
    <li>
      <p><img src="img/img02"></p>
      <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    </li>
    <li>
      <p><img src="img/img03"></p>
      <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    </li>
  </ul>

<li>

テキストテキストテキストテキスト

</li>

<li>

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

</li>

<li>

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

</li>

</ul>

■css

.box{
 display:flex;
}
.box li{
 width: 31%;
 margin: 1%;
}

.box{

display:flex;

}

.box li{

width: 31%;

margin: 1%;

}

便利なFlexboxですが、
Flexboxは全てのブラウザとバージョンに対応しているワケではないので、ベンダープレフィックスを使用したほうが良いでしょう

.box {
  display: -webkit-box;
  display: -moz-box;    
  display: -ms-flexbox;
  display: -webkit-flex; 
  display: flex
}

.box {

display: -webkit-box;

display: -moz-box;

display: -ms-flexbox;

display: -webkit-flex;

display: flex

}

この記事を見た人は次の記事も見ています。

Noto Fonts

tdが横に伸びない

ボックスの高さを揃える

この記事を見た人は次の記事も見ています。

コメント

最近の投稿

アーカイブ

RELATED

IE8への対応をいつまで考えるべきか

Adobe CC利用者はTypekitでモリサワが利用可能

CSSをSCSSに変換する

CSSで動画を背景に設定する

CSS:画像トリミング

カテゴリ名をリンク付きでリスト表示する WordPressタグ