2022/02/16

display:flexの設定値のまとめ

---

HTMLにおいて、cssの "display:flex" を使うと要素を並列に並べることができます。
設定値によって色々な並べ方が可能なので、まとめてみました。

基本

<div style="display:flex;">
  <div>要素1</div>
  <div>要素2</div>
  <div>要素3</div>
</div>

中央寄せ

<div style="display:flex; justify-content:center; align-items:center;">
  <div>要素1</div>
  <div>要素2</div>
  <div>要素3</div>
</div>

右寄せ

<div style="display:flex; justify-content:flex-end; align-items:flex-end;">
  <div>要素1</div>
  <div>要素2</div>
  <div>要素3</div>
</div>

均等スペース　間だけ均等

<div style="display:flex; justify-content:space-between;">
  <div>要素1</div>
  <div>要素2</div>
  <div>要素3</div>
</div>

均等スペース　全部均等

<div style="display:flex; justify-content:space-around;">
  <div>要素1</div>
  <div>要素2</div>
  <div>要素3</div>
</div>

最後だけ右寄せ

<div style="display:flex;">
  <div>要素1</div>
  <div>要素2</div>
  <div style="margin-left:auto;">要素3</div>
</div>

スペースを埋める

<div style="display:flex;">
  <div style="flex-grow:1;">要素1</div>
  <div style="flex-grow:1;">要素2</div>
  <div style="flex-grow:1;">要素3</div>
</div>

一か所だけ幅固定

<div style="display:flex;">
  <div style="flex-basis:100px;">要素1</div>
  <div style="flex-grow:1;">要素2</div>
  <div style="flex-grow:1;">要素3</div>
</div>

端までいったら折り返す

<div style="display:flex; flex-wrap:wrap">
  <div>要素1</div>
  <div>要素2</div>
  <div>要素3</div>
</div>

以上です。

---

コメント（githubのアカウントが必要です）