flexbox용어

1. flex-container & flex-item

flexbox를 이용하기 위해서는 부모요소인 flex-container과 자식요소인 flex-item들이 필요합니다.

무엇보다 flex-container와 flex-item 각각에만 사용되는 속성들이 있기 때문에 이러한 개념을 잘 이해하는 것이 중요합니다.

또한 item이라는 요소 내부에 여러개의 요소를 가지며 item이 부모이자, 자식이 될 수도 있다는 점도 숙지해두길 바랍니다.

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

2. main axis & cross axis

flex-box는 2차원이 아니라 1차원의 공간의 직선정렬에 대한 이야기를 다루고 있습니다.

fex-box에 별도의 설정을 하지 않은 경우 가로에서 세로로 흐르는 x축에 해당하는 부분을 main axis(주축)이라고 하며, 위에서 아래로 흐르는 y축에 해당하는 부분을 cross axis(교차축)이라고 합니다.( flex-container의 속성을 변경을 해 main axis와 cross axis를 변경할 수도 있습니다.)

display outside
display속성에서 block, inline, inline-block 값을 사용하는 것은 오른쪽 그림의 빨간색 박스 입장에서 앞뒤에 있는 초록색 박스와의 관계에 관한 내용이었습니다.

display inside

또한 display: flex 또는 display: grid를 이용해 빨간색 박스 내부의 파란색 요소들의 레이아웃을 정의할 수도 있습니다.

결국 display: block, inline(컨테이너 외부요소들간의 관계) 과 display:flex, grid(컨테이너 내부의 요소들의 레이아웃)는 완전히 다른 개념이라고 생각하고 공부를 하는 것이 좋습니다.

또한 두개의 display: inline-flex; 과 같이 -를 통해 두가지 속성을 모두 나열할 수도 있습니다.