皆さんこんにちは。横並びと言えば「display:flex;」！そのくらい便利なこのプロパティ。
まだ覚えてない方も今からでも遅くないので覚えちゃいましょう！

ベージュのエリアに「ねこ」「いぬ」「とり」がいます。これを横並びしてみます。

• ねこ
• いぬ
• とり

基本

「display:flex;」を指定するだけで1列の横並びにしてくれます。
強制的に1列にするのでベージュのエリアが狭いと中身も自動で調整されてます。

• ねこ
• いぬ
• とり

 .list{
   display:flex;
 }
 

幅いっぱいになったら折り返し

1列にすると中身の幅が勝手に調整されるのは嫌だ！そんな時はこれだ！
「flex-wrap: wrap;」は幅を調整をしないで折り返してほしい時に使います。

• ねこ
• いぬ
• とり

 .list{
   display:flex;
   flex-wrap: wrap;
 }
 

配置の指定1

幅に対して中身の余白を均等にし、その空白の半分を両端に。

• ねこ
• いぬ
• とり

 .list{
   display:flex;
   justify-content: space-around;
 }
 

配置の指定2

幅に対してすべての余白を均等に。

• ねこ
• いぬ
• とり

 .list{
   display:flex;
   justify-content: space-evenly;
 }
 

配置の指定3

幅に対して端をそろえ余白を均等に。

• ねこ
• いぬ
• とり

 .list{
   display:flex;
   justify-content: space-between;
 }
 

  .list{
    display:flex;
  }
  .list li:nth-of-type(3n-1){
    margin-left: auto;
    margin-right: auto;
  }
  

  .list{
    display:flex;
  }
  .list li::first-of-type{
    margin-right: auto;
  }
  

配置の指定4

幅に対して中心に寄せる。

• ねこ
• いぬ
• とり

 .list{
   display:flex;
   justify-content: center;
 }
 

配置の指定5

幅に対して左に寄せる。最初から左寄せなので見た目だと変わりませんね。

• ねこ
• いぬ
• とり

 .list{
   display:flex;
   justify-content: flex-start;
 }
 

配置の指定6

幅に対して左に寄せる。

• ねこ
• いぬ
• とり

 .list{
   display:flex;
   justify-content: flex-end;
 }
 

縦方向に中心

縦幅に対して中心に寄せる。めちゃくちゃ便利。「vertical-align: middle;」が使えないときはこれ！

• ねこ

 .list{
   display:flex;
   align-items: center;
 }
 

縦横方向に中心

縦横に対して中心に寄せる。「position: absolute;」の代わり。今日はこれだけ暗記して帰ればOKです。マジで。

• ねこ

 .list{
   display:flex;
   justify-content: center;
   align-items: center;
 }