スタイルシート(CSS)を使ってレイアウトを組んでみよう～Flexboxを使ったレイアウト

Flexboxを使ったレイアウト

前回までは、画面のレイアウトをfloatプロパティとclearプロパティを組み合わせて実装していましたが、今回はより簡単にレイアウトを組むことができるFlexboxプロパティを使ってみましょう。
Flexboxプロパティには多くの機能がありますが、本記事ではさわりの部分のみを解説します。
Flexboxプロパティの詳細な情報は、以下のMDN Web Docsを参照してください。

MDN Web Docs

Flexboxの基本的な使い方

Flexboxプロパティは、レイアウトを組みたい要素を格納する親要素を定義して、そこにFlexboxプロパティの値を記述します。

display: flex;

以下の例は、親要素をcontainerクラス、子要素をboxクラスとし、boxクラスを２つ並べて表示させます。
スタイルシートに1行書くだけで、横並びのレイアウトを組むことができます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>HTML/CSS 4-1</title>
    <link rel="stylesheet" href="stylesheet4-1.css" />
  </head>
  <body>
    <div class="container">
      <div class="box">子要素１</div>
      <div class="box">子要素２</div>
    </div>
  </body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

</div>

</body>

</html>

body {
    margin: 0px;
    padding: 0px;
}

.container {
    background: yellow;
    height: 200px;
    display: flex;
}

.box {
    background: aquamarine;
    width: 200px;
    margin: 10px;
}

body {

margin: 0px;

padding: 0px;

}

.container {

background: yellow;

height: 200px;

display: flex;

}

.box {

background: aquamarine;

width: 200px;

margin: 10px;

}

少し複雑なレイアウト

子要素を横並びにするだけなら「display: flex;」だけで良いのですが、少し複雑なレイアウトを組もうとする場合は別な指定が必要です。
ここでは、こちらの記事で作成した以下のレイアウトをFlexboxを使って組んでみましょう。

上記のレイアウトを組むためには、まずasideとarticleを横並びにします。
asideとarticleを子要素にするために、親要素container1クラスを定義します。
articleの中にbox1～box4クラスを配置するために、親要素container2クラスを定義します。
また、container2クラスの中を2段にするために、折り返し指定をします。
折り返しはの指定は、以下の通りです。

flex-wrap: wrap;
または
flex-flow: wrap;

実際のコードは、以下のようになります。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>HTML/CSS 4-2</title>
    <link rel="stylesheet" href="stylesheet4-2.css" />
  </head>
  <body>
    <header>header</header>
    <div class="container1">
      <aside>aside</aside>
      <article>article
        <div class="container2">
          <div class="box1">box1</div>
          <div class="box2">box2</div>
          <div class="box3">box3</div>
          <div class="box4">box4</div>
        </div>
      </article>
    </div>
    <footer>footer</footer>
  </body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

<header>header</header>

<aside>aside</aside>

<article>article

</div>

</article>

</div>

<footer>footer</footer>

</body>

</html>

body {
    height: 700px;
}

header {
    background-color: magenta;
    height: 20%;
    width: 90%;
}

aside {
    background-color: yellow;
    width: 30%;
}

article {
    background-color: lime;
    width: 60%;
}

footer {
    background: cyan;
    height: 20%;
    width: 90%;
}

.container1 {
    background: white;
    height: 60%;
    display: flex;
}

.container2 {
    background: white;
    height: 80%;
    width: 80%;
    margin: 2% auto;
    display: flex;
    flex-wrap: wrap;
}

.box1 {
    background: pink;
    height: 50%;
    width: 50%;
}

.box2 {
    background: orange;
    height: 50%;
    width: 50%;
}

.box3 {
    background: tomato;
    height: 50%;
    width: 70%;
}

.box4 {
    background: violet;
    height: 50%;
    width: 30%;
}

body {

height: 700px;

}

header {

background-color: magenta;

height: 20%;

width: 90%;

}

aside {

background-color: yellow;

width: 30%;

}

article {

background-color: lime;

width: 60%;

}

footer {

background: cyan;

height: 20%;

width: 90%;

}

.container1 {

background: white;

height: 60%;

display: flex;

}

.container2 {

background: white;

height: 80%;

width: 80%;

margin: 2% auto;

display: flex;

flex-wrap: wrap;

}

.box1 {

background: pink;

height: 50%;

width: 50%;

}

.box2 {

background: orange;

height: 50%;

width: 50%;

}

.box3 {

background: tomato;

height: 50%;

width: 70%;

}

.box4 {

background: violet;

height: 50%;

width: 30%;

}