Span 태그로 실험

<div class="con">
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>

.con {
  width: fit-content;
  margin: 300px auto;
  /* display: flex;
  justify-content: center;
  gap: 10px; */
}
span {
  border: 1px solid tomato;
  width: 100px;
  height: 100px;
}

Flex 적용 X

위와 같이 span 태그는 inline 태그로, width height가 적용되지 않는다.

Flex 적용 O (주석 해제)

부모가 display:flex; 속성을 가지면 inline태그도 마치 block 태그처럼 width, height을 가지는 모습을 볼 수 있다.