CSS 기초지식 2부(Flex)

⌨️시작하기 전에

1부에 이어서 CSS 중 flex에 초점을 두어 정리를 해볼까한다. grid라는 속성도 있지만 이 속성을 배우기 전에 flex의 속성을 어느 정도 알아야 되기 때문에 이번에는 flex를 중점으로 다뤄보고자 한다.다음에는 grid 혹은 타임라인 구현을 이용한 css를 다뤄보고자 한다.

Flex란?

플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성
❗️레이아웃 배치에 유용하며, 수직구성 & 수평구성 중 수평구성에 유리하다

Container와 Item의 차이

• Container : Flex라는 속성의 영향을 받는 전체적인 공간을 뜻한다.
• Item : Container에 적용된 설정에 따라 배치되는 요소이다.
  ❗️아래와 같이 되어있을 때, 바깥 테두리로 되어있는 곳이 Container이고, 그 Container 안에 담겨져 있는 것이 Item이다. Item은 설정에 따라서 여러 개를 담을 수도 있다.
  

Main Axis와 Cross Axis

• Main Axis
  예를 들어 수직적 구성으로 배치가 되어있다고 하면, 수직 방향이 Main Axis가 되며 justify-content 속성으로 아이템 정렬을 설정할 수 있다.
• Cross Axis
  Main Axis의 반대방향으로서 수직 방향이 Main Axis라면 수평 방향이 Cross Axis가 된다. Cross Axis의 경우는 Align-items 혹은 Align-contents 속성으로 아이템 정렬을 할 수 있다.(둘의 차이점은 아래 Flex Container 속성에 나온다)

Flex Container 속성

• flex-direction : 중심축 방향을 결정
• flex-wrap : 줄 바꿈시 어떻게 처리할 건지 결정
• flex-flow : flex-direction + flex-wrap
• justify-content : 중심축 방향으로 item 정렬 방법
• align-items : 교차축의 정렬 방법을 설정(1줄 일때)
• align-content : 교차축의 정렬 방법을 설정(2줄 이상일 때)

중심축 방향과 교차축 방법을 정 가운데에 하고 싶다면 display :flex를 한 뒤 justify-content와 align-items(혹은 content)를 center로 지정을 해주면 된다.

Flex Item 속성

• order : item 순서를 결정
• flex-grow : 너비 증가에 따른 비율 결정
• flex-shrink : 너비 감소에 따른 비율 결정
• flex-basis : 기본 너비 결정
• flex : flex-grow + flex-shrink + flex-basis
• align-self : 교차축의 item 정렬 방법 결정