Help us understand the problem. What is going on with this article?

【第 1 歩】CSSのFlexboxを使ってみました。

はじめに

はじめまして。
なびげーとです。

今日は初めての投稿をします。

CSSのFlexboxについて勉強しているときに、いろいろ迷ったので、
備忘録としても活用できるように記事を書いてみようと思いました。

至らない点も多々あると思いますが、誰かのお役に立てるような記事になれば幸いです。

目的

以下のようなタイル調のデザインを作成する。
1-1.png

前提条件

各タイルは画像とし、画像にはリンクが設定されているものとする。

考え方

縦のFlexboxと横のFlexboxを組み合わせる。

準備

今回は四角の図形ばかりなので、わかりにくくならないためにそれぞれに名前と色をつけました。
1-2.png

開発環境:
VisualStudioCode

実践

1. 縦のFlexbox

まずは縦のFlexboxを作ります。
1-3.png

HTML

index.html
<body>
    <header></header>
    <section main>
      <div class="container">
        <div class="content-column">
          <a href="#"><img src="../images/small_01.png"/></a>
          <a href="#"><img src="../images/small_02.png"/></a>
        </div>
      </div>
    </section>
    <footer></footer>
  </body>

CSS

style.css
.content-column {
  display: flex;
  flex-flow: column;
}

.content-column a {
  margin: 5px;
}

まず、htmlに2つの画像を用意し、その2つの画像を囲むdiv(content-column)を設定する。

2つの画像を囲ったdiv(content-column)に display: flexを設定し、
縦に並べたいので、flex-folwはcolumnを指定。

画像コンテンツの間に少し余白が欲しいので、ひとまずmarginも設定してます。

2. 横のFlexbox

このとき、横にFlexboxで並べるのは以下の3つです。
・large_01
・content-column(small_01, small_02)
・large_02
1-4.png

HTML

index.html
<body>
    <header></header>
    <section main>
      <div class="container">
        <div class="content-row">
          <a href="#"><img src="../images/large_01.png"/></a>
          <div class="content-column">
            <a href="#"><img src="../images/small_01.png"/></a>
            <a href="#"><img src="../images/small_02.png"/></a>
          </div>
          <a href="#"><img src="../images/large_02.png"/></a>
        </div>
      </div>
    </section>
    <footer></footer>
  </body>

CSS

style.css
.content-column {
  display: flex;
  flex-flow: column;
}

.content-column a {
  margin: 5px;
}

.content-row {
  display: flex;
  flex-flow: row;
}

おや...?
1-5.png

実は今回は画像サイズをsmall画像*2 = large画像にはしておらず、上記のような状況になっております。
今回は高さをpx指定で調整します。

3. 画像サイズがバラバラなので、調整する

CSSだけ書き変えます。

CSS

style.css
@charset "utf-8";

img {
  max-height: 100%;
  max-width: 100%;
}

.content-row {
  display: flex;
  flex-flow: row;
}

/* imgの親がaなので、aに対してheight指定しておかないと、imgのmax-heightが適用されない */
.content-row a {
  margin: 5px;
  height: 150px;
}

.content-column {
  display: flex;
  flex-flow: column;
}

/* imgの親がaなので、aに対してheight指定しておかないと、imgのmax-heightが適用されない */
.content-column a {
  margin: 5px;
  height: 70px;
}

1-6.png

自分がハマったポイントはどのタグ・要素に高さを指定するかでした。
最初<div class=container>に対して高さを指定しましたが、その場合<div content-column>内のimgのmax-height: 100%<div class=container>に対しての高さに対して有効になってしまったため、samll画像の調整ができませんでした。
また、large画像の高さを調整するときも<div class=content-row>に150pxを指定してもうまくいきませんでした。
コメントにしてますが、imgの親であるaタグに対して高さを指定することでimgのmax-height: 100%が有効(自分がイメージしていた指定)になりました。

まとめ

Flexboxの実装はとても簡単でした。
ただし、いくつか組み合わせようとしたとき、高さの指定や画像が想定の範囲に収まらないことがありました。
一見複雑な見た目でも全体像を「パズル」、作るのは「パズルのピース」とイメージをすることで、簡単に実装できました。

そして、この記事を書いているときに気づいたのが....
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout
グリットレイアウトの方がよかったのでは....?
グリットレイアウトでも作成して比較できたらいいなと思います。

今回は以上です!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした