福岡 SEO対策・ホームページ制作・広告運用代行なら
株式会社スゴヨク

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

SUGOYOKU BLOG

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

福岡のホームページ制作会社のスゴヨクです。

今回は小ネタシリーズになります。

スマホ、パソコン共に左右にするレイアウトって多いんじゃないか思います。

左右とはこのような感じです。

flex レイアウト 左右

そこで文字だけを要素の下につけたい時はfloatと同じ要領で
relativeとabsoluteだけで下に落としていきます。

HTML

scss

まずはflexの場合だとこうなります。

flex レイアウト 左右

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

scss

設定するとこのようになります。

flex レイアウト 左右

なぜ「Bottom-Txt」を囲ってpositionを設定するのかというと

ワードプレスのカテゴリーやタグを配置するときに

<p>タグや<span>タグで設定をすることかと思います。

同じように<p>タグや<span>タグにabsoluteを設定すると文字が被ってしまい、

後々面倒なことになってしまいます。

 

floatの時と一緒で下に下げたい時はこの方法が一番簡単ですね。

ホームページの事でお困りならこちらから

お見積り・ホームページ制作・運用、広告に関するご質問まで、どんなことでもお気軽にご相談ください。
日・祝日・休業日以外は24時間以内に返信いたします。

スゴヨク ロゴ

TOP