かゆいところに手が届く!Flexboxを使った便利な小技

要素を横並びにする時に便利なFlexbox(フレックスボックス)。みなさん、使いこなせていますか?今回はFlexboxを使ったちょっとした小技や、ハマりがちなポイントとその回避例を紹介します!

画像とテキストを互い違いに表示

See the Pen Flexbox – row-reverse tip by Mana (@manabox) on CodePen.

まずは画像とテキストが入るボックスを作成。それらを囲む .box という div を用意しました。

HTML

<div class="box">
  <img src="images/iphone1.jpg" alt="">
  <div class="box-text">
    <h2>見出しが入ります</h2>
    <p>テキストが入ります</p>
  </div>
</div>

<div class="box">
  <img src="images/iphone2.jpg" alt="">
  <div class="box-text">
    <h2>見出しが入ります</h2>
    <p>テキストが入ります</p>
  </div>
</div>

この親要素となる .boxdisplay: flex を指定すると横並びになります!

CSS

.box {
  display: flex;
}

さらに偶数のボックスには画像とテキストを逆に配置したいので、「偶数の要素」を指定するためのセレクター、:nth-child(even).box に対して付与。続いて flex-direction: row-reverse; を指定することで、中身の要素を逆向きに横並びにできます。

CSS

.box:nth-child(even) {
  flex-direction: row-reverse;
}

横並びにした画像が伸びるのを防ぐ

See the Pen Flexbox – align-self by Mana (@manabox) on CodePen.

img 要素と p 要素で画像とテキストを横並びにする機会は多いと思います。HTMLで書くとこのようになるでしょう:

HTML

<div class="container">
  <img src="moon.jpg" alt="">
  <p>Once when I was six years old I saw a magnificent picture in a book...</p>
</div>

この例だと imgp の親要素である .containerdisplay: flex を指定します。が、そのままだと画像が縦長に引き伸ばされて表示されてしまいます。。

これはフレックスボックスを使うと垂直方向の揃えが stretch となっており、横並びになる子要素の高さを揃えようとするのが原因です。

回避するには親要素に対し align-items: flex-start; を指定すればOK!

CSS

.container {
  display: flex;
  align-items: flex-start;
}

または引き伸ばしたくない子要素に align-self: flex-start; を指定しても同様に回避できます。

フッターを最下部に固定表示

See the Pen Flexbox – Sticky Footer by Mana (@manabox) on CodePen.

コンテンツの高さが足りないと、フッターが画面中ほどに表示され、フッターの下にスペースがあいてしまいます。制作中にこんな場面に出くわした方も少なくないのでは?

これもフレックスボックスで解決しましょう!余分な要素を足さなくてもいいので、手軽に実装できますよ。

HTML

<body>
  <article>
    <h1>Webクリエイターボックスについて</h1>
    <p>2010年1月4日生まれ。Web関連の情報やデザイン、サイト制作なんぞを記事にしています。</p>
  </article>
  <footer>
    &copy; 2017 Webクリエイターボックス
  </footer>
</body>

CSSではフッターの上にくる要素(この例だと article )に対して flex: 1; を加えてフッターを押し下げるところがポイントです。

CSS

html, body {
  height: 100%;
}
body { 
  display: flex;
  flex-direction: column;
}
article {
  flex: 1;
}

htmlbody に対して height: 100%; とすることでIEでもきちんと実装できます。

※ご指摘いただきました。ありがとうございます!


WebクリエイターボックスではFlexboxの便利なチートシートも配布中!プロパティーや値の書き方で戸惑うことも多いと思いますので、ぜひご利用くださいね!

シェアする

コメント

  • Aveit.

    Webクリエイターズボックス様。いつも参考にさせていただいております。

    「フッターを最下部に固定表示」の記事ですが、このままの方法ですとIE11では最下部に固定とはならないようです。
    ここままのマークアップの場合でしたら、css内のhtmlに、bodyで記述しているものと同様の
    display: flex;
    flex-direction: column;
    を追記してやる事で、IE11でも最下部に固定されるようになるかと思います。

  • おお!ご指摘ありがとうございます!さっそく追記しました!

  • min-height を使わなければIEでも動くようなので、そのような記述に変更いたしました!

  • min-heightを同時に記述してもheight: 100%を入れることで大丈夫なようですね。
    難しく考えすぎました。単純な事でした。ご教授ありがとうございます。

ニュースレター

Web制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。 ぜひご登録ください!もちろん無料です! :)