Flex and Flex-Item

What is Flex?

Flex란 요소들을 웹 페이지에 배치시키위해 탄생한 기능이다.

기본적으로 Flex는 container와 item들로 구성되어 동작한다.

• Container : Flex로 설정할 상위요소로 자식요소들은 기본적으로 수평 정렬 된다.

• Item: Container의 모든 자식 요소들은 자동적으로 Flex-item으로 설정된다.

Flex-Conatiner 주요 속성 및 개념

• Flex-Wrap : item들이 container의 1줄 영역에서 넘치는 것을 대비해 여러줄에 item을 배치할지 결정하는 property

  • Flex Item은 기본적으로 container내 1줄 안에 들어가도록 flex-shrink가 적용되어 크기가 결정
  • 기본값은 no-wrap으로 item들이 1줄에 다 들어가도록 정렬된다.

• Main axis: Item을 정렬하는 데 있어서 기준이 되는 방향으로 flex-direction에 따라 결정된다.

  justify-content	align-content	align-items
  주축으로 item들을 정렬하는 property	여러 줄에 대해 item들을 교차축으로 정렬하는 property로 wrap property를 설정해야 동작!1	1줄에 대해 교차축으로 item들을 정렬하는 property

  • Flex-direction에 따라 주축, 교차축은 항상 달라지기에 교차축 = y축 으로 외우지 않도록 하자.

★★flex-item★★

Flex는 주로 수평정렬에 쓰이기에 item속성에 소홀해 질 수 있지만 item 속성도 layout만큼이나 중요하다!

• Flex-item의 초기 속성은 flex: 0 1 auto

  	flex-grow	flex-shrink	flex-basis
  default value	0	1	Auto
  visible actions	브라우저 크기가 커짐에 반응 X	브라우저 크기가 작아짐에 반응 O	일반 width처럼 동작하지만 inline이 된 것처럼 줄바꿈이 일어나지 않음
  실제 행동	container 내부의 여백을 차지하도록 item이 커지지 않음	Container < item일 때, item을 축소 O	width값 ?? auto와 같이 동작

  • Flex-grow : item이 container에서 남은 영역에 대해 차지하는 정도/비율을 지정하는 property

    • width = container% 꼴로 item에 width를 할당하는 것이 아님에 주의!

  • Flex-shirnk : container의 영역보다 item의 크기가 커진 경우 overflow 하지 않도록 해당 item의 크기를 축소하는 property로 해당 비율에 따라 item 크기의 줄어드는 정도가 결정된다.

    grow와 shrink는 크기 자체가 아니라 비율을 설정한 것!!

  • Flex-basis : Flex Item의 크기를 결정하는 속성으로 width와 비슷하게 동작한다.

    • Priority : flex-basis -> width -> content
    • flex-basis의 크기는 flex-direction에 따른 값!! -> direction = col이 되면 width가 아닌 height가 flex-basis의 할당값을 가져간다.

  ---

  Flex Item Property with example

  

  1) Flex로 설정한 경우 초기의 item들은 위처럼 같은 column으로 정렬되지 않는 상태

  • flex: 0 1 auto 이기에 item들은 content size에 따라 공간을 차지한다.
  • 각 요소들이 block level이지만 container 1줄의 크기를 모두 차지 않는 건 flex가 item의 content size (정확히는 max-content를 참고한다) 에 따라 영역을 할당하고 flex-shrink를 적용시키기 때문이다.
  
  2. 각 요소들에 flex-shirnk가 적용되어 위 그림과 같이 item들의 실제 크기를 계산 및 할당한다.
  3. Flex Item들이 같은 column width를 가지게 하는 방법으로는 크게 2가지가 존재.
     1. Item마다 flex: 1 선언
     2. flex_container > * { flex-basis: 100% }

< 다른 example >

.child { flex: 1 }
.child:last-child { flex: 3; background-color: green;  }

• flex-grow: 3이 green (3rd) 적용이 되어 있지만 2nd column의 content size 때문에 flex-grow가 정상적으로 작동되지 않는 것 처럼 보인다.
• 하지만 flex-grow는 container전체에 대한 item의 비율을 할당하는 것이 아니라 남은 영역에 따른 비율을 할당하는 것이므로 2nd-child가 차지하는 content 크기 때문에 위와 같은 결과가 나온 것이다.

width vs flex-basis

• Width는 element의 너비를 지정하는 속성으로 Flex-basis도 기본적으로는 width와 똑같이 동작한다.
• 정확히 flex-basis는 element의 너비가 아니라 flex-direction에 따른 주축의 너비를 설정하는 것!!
  • direction: column이 되면 element의 높이가 flex-basis로 설정된 값으로 변경되는 것을 볼 수 있다.
• 다만, Height property에 대해서는 조금 다르게 동작한다.
  • Height property는 flex-shrink에 따라 정상적으로 동작하지 않는다. 따라서 flex-direction이 column인 경우 flex-basis를 사용해 flex-shrink에 따라 동작할 수 있도록 하는 것이 바람직하다.

flex: 1 을 파헤쳐보자!

• Flex-grow가 1이 되었기에 컨테이너 내부에서 1만큼의 너비를 할당 받는 것을 의미한다.
• flex-shrink가 1은 default값을 가짐.
• flex-basis가 0이 되었기에 실제로 item의 크기는 0이다! (Default인 auto가 아님에 주의!). 하지만 flex-grow로 인해 할당된 너비만큼 item의 크기를 증가시킨다! (아래 사진 참조)

• Result : Item은 container를 overflow하지 않는 범위에서 남은영역을 grow의 비율에 따라 차지하게 된다.

Think Flex as abbrivation of "Flexible"

참고 사이트

• Flex Item Works More Complicated than you think
• 위 자료에 대한 Youtube 영상 링크
• Flex 기본 속성
• Understand flex-grow, shirnk, basis
• difference between flex-basis and width
• How to set Flex-items same width _ Flex_container > * {flex-basis: 100%}
• CSS Trick Flex Guide