Zenn
Closed15

【CSS】flexboxの基本

CSS
HTML
CSS 3
HTML 5
CSS設計
mama

基本

  • flexboxを適用したい領域を囲む要素にdisplay: flexを設定する
    • 指定された要素は「flexコンテナ」、子要素は「flexアイテム」として機能するようになる

軸

  • 主軸（main axis） / 交差軸（cross axis）
  • これらを起点として、上揃えや下揃えなどができるようになる
  • flex-directionというものを使用して軸を変更することが可能となる
mama

flexコンテナ

コンテナの適用

<ul clas="flex">
    <li>アイテム</li>
    <li>アイテム</li>
    <li>アイテム</li>
    <li>アイテム</li>
</ul>

.flex {
    display: flex;
}
mama

justify-content

  • 主軸方向の整列
.flex {
  justify-content: flex-start; /*初期値*/
  justify-content: flex-end;
  justify-content: center;
  justify-content: space-around;
  justify-content: space-between;
}
mama

align-items

  • 交差軸方向の整列
.flex {
  align-items: stretch; /*初期値*/
  align-items: flex-start;
  align-items: flex-end;
  align-items: center;
  align-items: baseline;
}
mama

flex-wrap

  • アイテムを複数行並べる
    • アイテムがコンテナに収まりきらないときにアイテムを折り返して整列させる
.flex {
  flex-wrap: nowrap; /*初期値*/
  flex-wrap: wrap;
  flex-wrap: wrap-reverse;
}
mama

align-contentでの複数行アイテム全体の配置変更

  • flex-wrapで折り返すことを指定し、交差軸での整列を指定することができるのがalign-content 
.flex {
  height: 300px;
  flex-wrap: wrap;
  align-content: stretch; /*初期値*/
  align-content:flex-start;
  align-content: flex-end;
  align-content: center;
  align-content: space-around;
  align-content: space-between;
}
mama

flex-direction

  • 軸の方向を変更することが可能
    • 主軸の方向は、初期状態の場合「左から右」
    • flex-directionを指定することにより、主軸の方向を変更することが可能
.flex {
  flex-direction: row; /*初期値*/
  flex-direction: row-reverse;
  flex-direction: column;
  flex-direction: column-reverse;
}
mama

flexアイテム自身に指定するプロパティ群

align-self

  • 交差軸方向の整列を個別に指定する
/* 本来はここのアイテムに指定する */
.flex li:nth-child {
  align-self: stretch;
  align-self: flex-start;
  align-self: flex-end;
  align-self: center;
  align-self: baseline;
}
mama

order

  • アイテムの表示順を変更
  • 数字が大きい方が後ろに表示される
  • 指定しない場合はorder: 0とみなされる
.flex li:nth-child(1) {
  order: 1;
}
.flex li:nth-child(2) {
  order: 2;
}
mama

flex-grow

  • 余白部分いっぱいにアイテムを引き伸ばす
  • アイテムの比率に応じて引き伸ばす数値を分配しアイテムのサイズを動的に調整する
.flex.grow1 li:nth-child(1) {
  flex-grow: 1;
}
.flex.grow1 li:nth-child(2) {
  flex-grow: 1;
}
mama

flex-shrink

  • アイテムが縮むのを防ぐことができる
  • 親コンテナより子アイテムの方が大きくなってしまった場合に、指定した比率に応じて各アイテムを縮ませることができる
.flex li:nth-child(1) {
  flex-shrink: 0;
}
mama

flex-basis

  • アイテムサイズを指定することができる
    • 主軸のサイズを指定することができる
.flex li:nth-child(2) {
  flex-basis: 200px;
}
mama

応用

2カラムレイアウト

  • 2カラムにしたい場合は、flexコンテナ内にflexアイテムを二つ追加する必要がある
    • 大枠の場合例えばmainとasideなどをdiv要素で囲うなどする
  • flexレイアウトを適用する場合は必ずその領域を何らかの要素で囲いdisplay: flexを適用する必要がある

3カラムレイアウト

  • 基本2カラムと同様にflexコンテナを追加し、対象のアイテムを囲う
mama

注意点

必ずflexコンテナとなる直接の親要素が必要になる

  • flexboxレイアウトを利用するだけのためにdiv要素を追加する必要が出てしまう

flexアイテムとしてコントロールできるのはコンテナ直下の要素のみ

  • 孫要素などの操作はできないため、都度flexコンテナを適用する必要がある
mama

flexboxに並ぶCSS grid

  • 二次元のレイアウト手法が可能となる
  • 複数行のレイアウトが得意
  • HTMLの多重入れご構造を持たなくて済む

使用

  1. グリッドコンテナを指定
.container {
    display: grid;
}
  1. 作りたいレイアウトに合わせて、行方向 / 列方向にグリッドラインを設定する
.container {
    display: grid;
    grid-template-rows: 100px 1fr 100px;
    grid-template-columns: 200px 1fr 200px;
}
  1. エリアにアイテムを配置する
.container {
    display: grid;
    grid-template-rows: 100px 1fr 100px;
    grid-template-columns: 200px 1fr 200px;
    grid-template-areas:
        "header header header"
        "side1 main side2"
        "footer footer footer";
}
  1. コンテンツを各エリアに配置
.header { grid-area: header; }
.side1 { grid-area: side1; }
.side2 { grid-area: side2; }
.main { grid-area: main; }
.footer { grid-area: footer; }
このスクラップは2023/12/13にクローズされました