Flexbox Example

Flexboxでセマンティックでアクセシブルなウェブページを作成

Flexboxの主要なプロパティ

フレックスコンテナのプロパティ

display: flex; フレックスコンテナを作成。

flex-direction: 主軸の方向を設定。: row（デフォルト）: 水平方向。; row-reverse: 水平方向（逆方向）。; column: 垂直方向。; column-reverse: 垂直方向（逆方向）
justify-content: 主軸方向のアイテムの整列を設定: flex-start（デフォルト）: 主軸の開始位置; flex-end: 主軸の終了位置。; center: 中央。; space-between: アイテム間のスペースを均等に配置。; space-around: アイテムの周囲に均等なスペースを配置。
align-items: 交差軸方向のアイテムの整列を設定。: stretch（デフォルト）: アイテムを交差軸に沿って引き伸ばす。; flex-start:交差軸の開始位置。; flex-end: 交差軸の終了位置。; center: 中央。; baseline: テキストの基線に沿って整列。
フレックスアイテムのプロパティ: flex-grow: アイテムが成長する比率を指定。; flex-shrink: アイテムが縮小する比率を指定。; flex-basis: アイテムの基準サイズを指定。; align-self: 特定のアイテムに対して交差軸方向の整列を上書き。

まとめ

Flexboxは、ウェブページのレイアウトを簡単かつ柔軟に制御できる強力なツールです。主軸と交差軸の概念を理解し、コンテナとアイテムのプロパティを適切に使用することで、レスポンシブで使いやすいデザインを実現できます。

アイテム 1

アイテム 2

アイテム 3

/* HTML */
          <div class="container">
            <div class="item">アイテム 1</div>
            <div class="item">アイテム 2</div>
            <div class="item">アイテム 3</div>
          </div>

/* CSS */
            .container {
                display: flex;
                border: 2px solid #000;
                padding: 10px;
            }
            .item {
              background-color: #f0f0f0;
              border: 1px solid #ccc;
              padding: 10px;
              margin: 5px;
              flex: 1; /* 各アイテムを均等に広げる */
            }

アイテム 1

アイテム 2

アイテム 3

/* CSS */

.justify-content {
      display: flex;                    /* Flexコンテナを作成 */
      justify-content: flex-start;      /*初期値左側*/
      align-items: flex-start;          /*初期値左*/
      /* justify-content: center;        主軸方向にアイテムを開始位置に揃える */
      border: 2px solid #000;           /* 黒い境界線 */
      padding: 10px;                    /* 内側の余白 */
}
.item1 {
  background-color: #f0f0f0; /* 背景色 */
  border: 1px solid #ccc; /* 境界線 */
  padding: 10px; /* 内側の余白 */
  margin: 5px; /* 外側の余白 */
  
  /* flex: 1; */
}

アイテム 1

アイテム 2

アイテム 3

/* CSS */
      .justify-content-a{
        display: flex;                  /* Flexコンテナを作成 */
        justify-content: center;
        align-items: flex-end;       　 /*垂直方向に下に*/
        background-color: #a73076;       /* ベージュ */
        height: 160px;
        /* justify-content: center;        主軸方向にアイテムを開始位置に揃える */
        border: 2px solid #000;          /* 黒い境界線 */
        padding: 10px;                   /* 内側の余白 */
   }

display: flex; の主軸と交差軸

アイテム1
display: flex; の主軸と交差軸は、横軸と縦軸のことを指します。具体的には次の通りです：
主軸（Main Axis）：
デフォルトでは、フレックスコンテナ（親要素）内の子要素（フレックスアイテム）は横方向に並びます。つまり、主軸は水平方向です。 flex-direction プロパティで主軸の方向を変更できます。例えば、flex-direction: column; に設定すると、主軸は垂直方向になります。
交差軸（Cross Axis）：
交差軸は主軸に垂直な軸です。デフォルトでは、交差軸は垂直方向です。主軸の方向が変わると、交差軸の方向も変わります。例えば、flex-direction: column; に設定すると、交差軸は水平方向になります。以下に、display: flex; の主軸と交差軸についての例を示します：

アイテム2
この例では、最初の .container はデフォルトの flex-direction: row; で、アイテムは横方向に並びます（主軸は水平方向）。
二番目の .container.column では flex-direction: column; を設定しており、アイテムは縦方向に並びます（主軸は垂直方向）ので、交差軸は水平方向になります。

アイテム3
主軸と交差軸に関連するプロパティ
justify-content:: 主軸に沿ったアイテムの配置を設定します。
align-items:: 交差軸に沿ったアイテムの配置を設定します。
align-content:: 交差軸に沿った複数行のアイテムの配置を設定します（フレックスアイテムが複数行にまたがる場合に有効）。
これらのプロパティを使用することで、アイテムの配置を柔軟に制御することができます。

アイテム1

アイテム2

アイテム3


      .container-axis {
        display: flex;
        width: 100vw;
        height: 100vh;
        background-color: #f5f5f5;
     }
     

    .container-axis.column {
        flex-direction: column;   /* 主軸を縦方向に変更 */
    }


      /* CSS */
       /*スマホタイプ追加*/

      @media (max-width: 768px) {
          .container  {
                  flex-direction: column; /* 縦方向にアイテムを並べる */
              }
          }
      
      /*スマホタイプ追加*/
          @media (max-width: 768px) {
              .justify-content {
                  flex-direction: column; /* 縦方向にアイテムを並べる */
                  justify-content: center; /* 主軸方向に中央揃え */
                  align-items: center;    /*交差軸方向に中央揃え*/
                  /* 追加で主軸（縦方向）および交差軸（横方向）で中央揃えにします。 */
              }
          }