C-9. フレックスボックス

2021.12.23

display:flexについて知っておきましょう

ある要素に定義するだけで、その直下の要素が並列になるスタイルです。親要素に display: flex; 指定するだけです。作成して記述内容を確認してみましょう！

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
  <style>
    .container {
      display: flex;
    }
    .item{
      background-color: #00FFFF;
    }
  </style>
 
  <body>
     <div >
      <div class="item">フレックス 1</div>
      <div class="item">フレックス 2</div>
      <div class="item">フレックス 3</div>
      <div class="item">フレックス 4</div>
    </div>
 
    <div class="container">
      <div class="item">フレックス 1</div>
      <div class="item">フレックス 2</div>
      <div class="item">フレックス 3</div>
      <div class="item">フレックス 4</div>
    </div>

ブラウザでの表示結果

フレックスボックスは、主軸と交差軸の観点から考える必要があり、Flex Container内で直下に続くFlex Itemになります。

（親要素、Flex Container）フレックスコンテナに設定できる項目に以下があります。

項目意味
display:flexフレックスコンテナの指定　【よく使う】
flex-direction アイテムの並び順を指定する 【よく使う】
flex-wrap アイテムの折り返しを指定する 【よく使う】
flex-flow アイテムの並び順と折り返しを一括で指定する
justify-content アイテムの水平方向の位置を指定する
align-items アイテムの垂直方向の位置を指定する
align-content アイテムの行の垂直方向の位置を指定する

各項目はMDN（CSS: フレックスボックスレイアウト）で確認してください。

フレックスアイテムを知っておこう

Flex Container (display: flex など設定された要素) の直下の子要素がFlex itemになります。

記載して実行した結果からいろいろい変更してどのように表現されるか確認してみてください。

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
  <style>
    .container {
      display: flex;
      flex-wrap: wrap;
    }
    .item1{
      flex-basis: 200px;
      border: 2px solid #0000ff;
      background-color: #0099FF;
      text-align: center;
      min-height  : 20px;
    }
    .item{
      border: 2px solid #0000ff;
      background-color: #00FFFF;
      text-align: center;
      min-height  : 20px;
    }
  </style>
 
  <body>
    <div class="container">
      <div class="item1">フレックス 1</div>
      <div class="item">フレックス 2</div>
      <div class="item">フレックス 3</div>
      <div class="item">フレックス 4</div>
      <div class="item">フレックス 5</div>
      <div class="item">フレックス 6</div>
      <div class="item">フレックス 7</div>
      <div class="item">フレックス 8</div>
      <div class="item">フレックス 9</div>
      <div class="item">フレックス 10</div>
  </body>

ブラウザでの表示結果

フレックスアイテム(子要素)に設定できるflex系プロパティに以下があります。

項目意味
align-selfflex-directionで並べる際に、交差軸に対して子要素同士を
どのように間隔で並べるかを指定する
orderフレックスアイテムの並べる順番を指定する
flex-basisflex-basisはwidthのように幅を指定する。初期値はauto
flex-growフレックスアイテムを他の要素と比べてどのくらい伸ばすか指定する
flex-shrinkフレックスアイテムを他の要素と比べてどのくらい縮めるか指定する

各項目はMDN（CSS: フレックスアイテム）で確認してください。

2カラムレイアウトの方法を知っておこう

2段組みレイアウトを作成してみます。

ここでは、２種類の作成方法を示しておきます。記載して実行結果を確認してみましょう。

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
  <style>
    /* -------------------------------------------------- */
    /* ①.親要素に「display: flex;」を指定した場合 */
    .main{
     display: flex;
    }
    /* 横サイズを指定 */
    .contentA,.contentB,.contentC,.contentD{
      width: 50%;
      height: 100px;
    }
    .contentA{background: #b3d874;}
    .contentB{background: #6fb5ff;}
 
    /* -------------------------------------------------- */
    /*　②「floatプロパティ」を使い　左寄せ、右寄せにする要素を使う場合 */
    .contentC{
       float: left;
    }
    .contentD{
       float: right;
    }
    .contentC{background: #ffce5b;}
    .contentD{background: #ff838b;}
  </style>
 
 
  <body>
   /* ①.親要素に「display: flex;」を指定した場合 */
  <div class="main">    
    <div class="contentA">
     contentA
    </div>
    <div class="contentB">
     contentB
    </div>
  </div>
  <p></p>  
 
  /*　②「floatプロパティ」を使い　左寄せ、右寄せにする要素を使う場合 */
  <div class="contentC">
    contentC
  </div>
  <div class="contentD">
    contentD
  </div>
 
  </body>

ブラウザでの表示結果

課題

ヘッダーレイアウト、フッターレイアウトを作って、marginなどを組み合わせて以下のサイズでサイトの枠を作成してください。作成したファイル名をindex_2_19.htmlにして送ってください。

（横幅の最小サイズ380）

実行結果

ヒント

あくまで一例です。class名や中身を書き換えて、必要なものを付け加えてください。

例
XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
//HTML
<body>
    <header>
      header
    </header>
    <div class="①">
      <div class="②">
 
      </div>
      <div class="③">
        contentA
      </div>
      <div class="④">
 
      </div>
    </div>
    <footer>
      footer
    </footer>
 
  </body>
 
//CSS
    body{
     //最小幅px
    }
 
    header{
      // 背景色
      //　縦幅px
      // テキスト中央寄せ
    }
 
    .①{
　　　// 要素を横並びにする
    }
 
    .②{
      // 背景色
      //　横幅px
      //　縦幅px
    }
 
    .③{
      //　横幅px
      //　縦幅px
      // テキスト中央寄せ
    }
 
    .④{
      // 背景色
      //　横幅px
      //　縦幅px
    }
 
    footer{
      // 背景色
      //　横幅px
      //　縦幅px
      // テキスト中央寄せ
    }

課題・復習用検索キーワード

検索例
🔍HTML　フレックスボックス
🔍CSS　横並び
🔍CSS　最小幅　最大幅　設定方法
🔍CSS　縦横　数値　設定方法