Blog スタッフブログ

WEB制作

【CSS】FLEXBOXのコンテンツの高さを同じにする方法

こんにちは、WEB開発のYTです。

今回はCSSで横並びのコンテンツを作る際にコンテンツの文字数や写真の大きさによってコンテンツの高さが変わり不格好なデザインになるのを回避するための方法です。

例えばFLEXBOXを用いた横並びのコンテンツを配置した場合

<div class="flex_box three_flex ">
   <div class="flex_cont">
      <div class="under_merit_box">
            <p class="jose">ダミーテキスト</p>
            <b>ダミーテキスト</b>
            <img class="img-responsive" src="images/icon01.png" alt="">
            <div class="txt-box">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</div>
          </div>
        </div>
        <div class="flex_cont">
          <div class="under_merit_box">
            <p class="jose">ダミーテキスト</p>
            <b>ダミーテキスト</b>
            <img class="img-responsive" src="images/icon02.png" alt="">
            <div class="txt-box">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</div>
          </div>
        </div>
        <div class="flex_cont">
          <div class="under_merit_box">
            <p class="jose">ダミーテキスト</p>
            <b>ダミーテキスト</b>
            <img class="img-responsive" src="images/icon02.png" alt="">
            <div class="txt-box">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</div>
          </div>
        </div>
      </div>
.flex_box {
  display: flex;
  margin: 0px -14px;
  flex-wrap:wrap;
}

.three_flex .flex_cont {
  max-width: 33.3333%;
  width: 100%;
　padding: 0px 14px; 
}

.three_flex .flex_cont .under_merit_box {
    padding: 30px 30px;
    background: #ffffff;
    text-align: center;
    
}

となってしまいます。

子要素にbackgroundを#ffffffで指定しておりますが一番コンテンツを高さが異なるためこのようなデザインになってしまいます。

このデザインを解消するには

.flex_box {
  display: flex;
  margin: 0px -14px;
  flex-wrap:wrap;
}

.three_flex .flex_cont {
  max-width: 33.3333%;
  width: 100%;
　padding: 0px 14px; 　
　flex-direction: column;
  display: flex;
}

.three_flex .flex_cont .under_merit_box {
  padding: 30px 30px;
  background: #ffffff;
  text-align: center;
  flex: 1;
}

子要素である.flex_contにはflex-direction: columnとdisplay: flexを追加し、.under_merit_boxにはflex:1;を追加すれば

となります。

FLEXBOXは横並びのコンテンツをする際には応用が利き、レスポンシブの際も調整がしやすくおすすめです！

戻る一覧へ戻る