要素の横並び HTML/CSS

はじめに

要素を横並びにしたいのです

sample.html

<div class="contents">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

sample.css

.item{
  width: 100px;
  height: 100px;
  background-color: black;
  margin:30px;
}

今のままだと・・・

こんな時は・・・
親要素にdisplay: flex;をかけちゃいます。

sample.css

.contents{
  display: flex;
}

やりました！！！

最後に

display: flex;という名前の響きが大好きです。