More than 5 years have passed since last update.

61日目 Flexboxが使えるようになりました！

Posted at 2019-10-01

Progateにflexbox編が追加されていたのでやってみました。
PC、タブレット、スマホと画面サイズが異なる場合に
自動的にサイズを変えられるボックスみたいです。

使い方
###flexにしたい要素を適当なタグでかこむ。

<ul class="flex-list">
  <li class="li1">item1</li>
  <li class="li2">item2</li>
  <li class="li3">item3</li>
  <li class="li4">item4</li>
</ul>

###CSSでflexを使うと宣言する。

.flex-list {
  display: flex;
}
.flex-list li {
  flex: auto;
}

###タブレットの設定をする。
####例）画面サイズが1000px以下だったら、次のCSSを実行

@media (max-width: 1000px) {
  .flex-list {
    flex-wrap: wrap;
  }
  .flex-list li {
    width: 50%;
  }
}

###スマホの設定をする
####例）画面サイズが670px以下の場合

@media (max-width:670px) {
  .flex-list {
    flex-direction:column;
  }
  
  .flex-list li {
    margin:0 auto;
  }
}

なるほど、こうやってレスポンシブサイトを作っているのですね。
面白かったです。
（所要時間 21分）