「display:flex;」の使い方を最低限必要な方法だけまとめました｡
CSSのプロパティの細かい説明は省略して､どうやって並べたいのかからわかるようにしています｡
- 目次
display:flex;の使い方 横並び
横左揃え ､ 折り返し無 (デフォルト)
「display:flex;」だけを指定したときです｡
単純に横並びにしたいときはこれだけで横並びにすることができます｡
- POINT
- すべての子要素の幅が親要素の幅を超えるとつぶれるので注意が必要です｡
See the Pen display:flex; デフォルト by hashi84 (@hashi84) on CodePen.
横左揃え ､ 折り返し有
横左揃え ､ 折り返し無 (デフォルト)の子要素の幅が親要素の幅を超えても､つぶれないように改行させます｡
- POINT
- デフォルトに「flex-flow: row wrap;」を追加
- 「flex-direction: row;」「flex-wrap: wrap;」の省略形です｡基本的に省略形しか使いません｡
See the Pen display:flex; 改行あり by hashi84 (@hashi84) on CodePen.
横中央揃え ､ 折り返し有
横中央揃えにします｡
- POINT
- 「justify-content:center;」で横中央揃えの横並びになります｡
- 同じ「justify-content:center;」でも､縦並び(「flex-flow: column wrap;」等)になったときは縦中央揃えになるので注意が必要です｡
See the Pen display:flex; 中央揃え by hashi84 (@hashi84) on CodePen.
横右揃え ､ 折り返し有
横右揃えにします｡
- POINT
- 「justify-content:flex-end;」で横右揃えの横並びになります｡
- 同じ「justify-content:flex-end;」でも､縦並び(「flex-flow: column wrap;」等)になったときは縦下揃えになるので注意が必要です｡
See the Pen display:flex; 右揃え by hashi84 (@hashi84) on CodePen.
横左揃え ､ 折り返し有 ､ 縦中央揃え
縦中央揃えにします｡
縦位置のデフォルトは「stretch」で一番大きい高さに揃えられます｡
- POINT
- 「align-items:center;」で縦中央揃えの横並びになります｡
- 同じ「align-items:center;」でも､縦並び(「flex-flow: column wrap;」等)になったときは横中央揃えになるので注意が必要です｡
See the Pen display:flex; 縦中央揃え by hashi84 (@hashi84) on CodePen.
横左揃え ､ 折り返し有 ､ 縦下揃え
縦下揃えにします｡
- POINT
- 「align-items:flex-end;」で縦下揃えの横並びになります｡
- 同じ「align-items:flex-end;」でも､縦並び(「flex-flow: column wrap;」等)になったときは横右揃えになるので注意が必要です｡
See the Pen display:flex; 縦下揃え by hashi84 (@hashi84) on CodePen.
まとめ
「display:flex;」はこれ以外にももっといろいろなことができるのですが､横並びではこのくらい覚えておけばほとんどの調整ができます｡
