display: flex?

display: flex는 우리가 레이아웃을 더 쉽게 잡을 수 있도록 도와준다.

먼저 알아보기

• display는 container와 item으로 이루어지는데, item을 감싸는 container에 들어가는 속성과 item에 들어가는 속성이 따로 존재한다.
• main-axis와, cross-axis 즉, 주축과 교차축으로 이루어져 있다.

🐳container에 적용되는 속성을 알아보자!

display

• flex
  • 기본 주축이 row로 되어있기 때문에 가로 정렬이 된다.
• inline-flex
  • inline이기 때문에 가로로 정렬이 된다.
  • 또한 아이템들을 글자 취급을 하기 때문에 div 태그를 개행을 하였을 경우, 띄어쓰기가 되어있는것을 확인할 수 있다.

flex-direction

주축을 설정한다.

• row
  • 기본값으로 수평을 주축으로하여 item들이 수평정렬을 한다.
• column
  • 수직을 주축으로 하며, item들이 수직정렬된다.
  • row-reverse - row로 정렬을 하지만, 오른쪽에서부터 item들이 나온다.
• column-reverse
  • 수직으로 정렬이 되지만, 아래에서 위로 item들이 정렬이 된다.

flex-wrap

줄바꿈을 결정한다.

• nowrap
  • 줄바꿈을 하지 않겠다는 뜻이다.
  • 기본 flex-shrink값이 1인데, container보다 item들의 넓이가 넒은 경우, container에 맞추어 item들의 넒이가 감소한다. - wrap
  • item들이 넘치게 된다면 줄바꿈을 한다.

justify-content

주축을 어떻게 할 것인지 결정한다.

• flex-start
  • container의 시작지점을 주축의 시작점으로 한다.즉, flex-direction: column이라면 위에서부터 item들이 시작한다.
• flex-end:
  • container의 끝지점을 주축의 시작점으로 한다. 즉, flex-direction: column 이라면 item들이 아래로 정렬이 되어 있고, 주축이 수평일 경우에는 오른쪽 정렬이 되어 있는것을 확인할 수 있다.
• center
  • container height의 가운데에 아이템들이 모여 있다.
• space-between
  • item들의 시작과 끝은 주축의 시작과 끝에 붙어 있으며 그 사이의 간격을 균등하게 다른 아이템들이 나누어 가진다.
• space-around
  • item들이 margin을 균등하게 나누어 가진다. 따라서 시작과 끝 item들도 margin이 존재한다.

align-items

교차점에 대한 속성을 나타낸다.

• 기본적인 속성은 justify-content와 동일하지만 주축에 적용되는것이 아니라 교차점에 적용이된다는 것이 차이점이다.
• stretch
  • 기본 속성으로서 교차점의 높이를 가득 채운다.
• flex-start
  • 교차점이 기준이며, justify-content와동일하다.
• flex-end
  • 교차점이 기준이며, justify-content와동일하다.
• center
  • 교차점이 기준이며, justify-content와동일하다.
• baseline
  • 문자의 기준선이 기준으로 정렬이 된다.

align-content

두줄 이상 있을 때 동작하는 속성이며 align이므로 교차축에 적용이된다.
속성들은 기존의 속성들과 동일하다.

• stratch
• flex-start
• flex-end
• center
• space-between
• space-around

🐳item에 적용되는 속성을 알아보자!

flex-grow

아이템의 증가비율을 설정해 준다.

• 1일 경우 전체 container를 균등하게 가득차도록 item들이 늘어난다.
  nth-child를 통해 특정 item의 grow를 증가시켜준다면 그 비율만큼 너비를 차지를 한다.
• 하지만 이떄 item의 width가 있다면, width를 제외한 나머지 여백만큼의 공간을 flex-grow비율만큼 나누어 갖는다.

flex-shrink

아이템의 감소비율을 설정해 준다.

• 기본값을 1이며 값이 클수록 감소 폭이 크다.
• 0일 경우에는 감소하지 않는다.
  

flex-basis

아이템의 기본 너비를 설정할 수 있다.

• auto가 기본값이다.
• glex-basis를 사용한다면 px등을 사용할 수 없다.(auto제외)

flex

단축 속성으로써 grow, shrink, basis 속성을 차례로 작성해준다.

• basis를 생략하게 되면, auto가 들어가는것이 아니라 0이 들어간다.

order

flex item들의 순서를 지정해줄 수 있다.

• 음수도 들어갈 수 있다.
• item들의 기본order는 0이다.
• 순서가 크면 뒤로 밀려난다.

align-self

align-items의 속성을 상속받아 사용할수 있다.

• 개별아이템에 별도의 align-items 속성을 적용시키고 싶을 경우 사용할 수 있다.