【flexレイアウト】左右のレイアウトで文字を要素の下に落としたい時はこれ

SUGOYOKU BLOG

福岡のホームページ制作会社のスゴヨクです。今回は小ネタシリーズになります。スマホ、パソコン共に左右にするレイアウトって多いんじゃないか思います。左右とはこのような感じです。 flex　レイアウト　左右そこで文字だけを要素の下につけたい時はfloatと同じ要領で relativeとabsoluteだけで下に落としていきます。 HTML

<ul class="flex-wrap">
 <li>画像</li>
 <li><p class="Top-Txt">上のテキスト</p>
       <div class="Txt-Box">
       <p class="Bottom-Txt">上のテキスト</p> 
     </div>
  </li>
</ul>

<li><p class="Top-Txt">上のテキスト</p>

<p class="Bottom-Txt">上のテキスト</p>

</div>

</li>

</ul>

scss

.flex-wrap{
 display:flex;
 flex-wrap:wrap;
 position:relative;
 li{
  width: 50%;
 }
}

.flex-wrap{

display:flex;

flex-wrap:wrap;

position:relative;

li{

width: 50%;

}

まずはflexの場合だとこうなります。 flex　レイアウト　左右

それからpositionを設定していきます。 scss

.Txt-Box{
 position:absolute;
 bottom:0;
}

.Txt-Box{

position:absolute;

bottom:0;

}

設定するとこのようになります。 flex　レイアウト　左右

なぜ「Bottom-Txt」を囲ってpositionを設定するのかというとワードプレスのカテゴリーやタグを配置するときに <p>タグや<span>タグで設定をすることかと思います。同じように<p>タグや<span>タグにabsoluteを設定すると文字が被ってしまい、後々面倒なことになってしまいます。 floatの時と一緒で下に下げたい時はこの方法が一番簡単ですね。