인프런 커뮤니티 질문&답변

안녕하세요 !
먼저 flex를 지정하셔도 문제는 없지만 적용하는 위지가 달라질 수 있습니다.

먼저 flex를 사용하신다면 css코드는 다음과 같이 작성해야할 것 같습니다.

.row {

  display: flex;

}

대신 cell 클래스에 있는 display: inline-block 스타일은 제거해주시면 됩니다.

display: inline-block;

이 스타일은 같은 수준에 있는 요소들 사이에서 해당 요소의 레이아웃을 설정합니다. 예를 들어서

<div>

  <div style="display: inline-block;"></div>

  <div style="display: inline-block;"></div>

</div>

와 같이 코드가 있을 때 inline-block이 적용된 두 div 요소는 같은 수준에 있고 서로 한 행에(inline) 위치하게 됩니다. 단, inline이기만 하면 크기나 여백을 설정하는 데 한계가 있기 때문에 inline-block으로 설정해줍니다.

display: flex;

이 스타일은 주로 내부에 있는 요소들의 위치를 배치(layout)할 때 사용합니다. 예를 들어서

<div style="display: flex;">

  <div></div>

  <div></div>

</div>

와 같이 코드가 있을 때 flex가 적용된 div 요소의 자식 요소인 두 div는 가로 정렬이 됩니다. 이유는 다음과 같이 기본 정렬 값이 row이기 때문입니다.

flex-direction: row;

display: flex; 스타일은 자식 요소들을 배치하는 여러가지 방법을 제공합니다. 이 방법들은 다음 문서를 참고해주세요 :)

flexbox의 기본 개념

도움이 되셨으면 좋겠습니다 :)

감사합니다!