[CSS스터디] 3회 - flex와 grid

 

Normal Flow

일반적인 위에서 아래로 쌓이거나, 텍스트가 텍스트처럼 쌓이는 구조

 

Flex

Flex Container, Flex flow

 

Flow를 바꾸는 것들, display 속성 중에 하나.

(display는 이 요소를 화면에 어떻게 나타낼지 결정하는 것, flex-box는 옛날 문법)

flex를 적용해주면 normal flow가 아닌 flex-flow로 적용되게 된다.

*자손까지 제어하는 display는 현재 없다. flex도 자식에게까지만 적용된다.

 

Flex Container를 생성하고, 자식요소들을 Flex box로 만드는 display 속성

 

Flex Flow란?

- 내부에 있는 요소들이 어떤 방향으로 쌓이게 만들 것인가?

- Flex는 기본적으로 1차원이며 축이 1개이다. 한 방향을 고려해서 만든다.

- 메인 축에 따라서 서브 축이 바뀌는 구조로 flex는 방향이 정해져 있다.

- 방향에 따라서 Flex box들이 쌓이게 만드는 것이 flex다.

- 방향에 따라서 교차축을 cross axis이라고 하며, main axis를 주축, cross axis를 교차축이라고 한다.

  - main axis는 flex-direction 속성을 이용하여 제어할 수 있고 justify-content 로 정렬한다.

  - cross axis는 변경 불가능하지만 정렬을 할 수 있다 align-item로 정렬한다.

- flex box는 기본적으로 본인이 가진 콘텐츠만큼을 크기로 가지려고 한다.

  - 콘텐츠가 넘치는 경우 박스를 계산하는 로직을 바꾸고 싶다면 flex:1 설정하면 1 배율씩 가지게 된다. (flex:2 하면 다른 박스에 비해 2배 크기를 가지게 된다.)

- flex-grow 속성의 숫자만큼 본인이 늘어날 수 있는 크기를 계산한다.

  - 다른 박스들과 계산을 했을 때 본인의 크기를 몇 배까지로 계산할 것인가.

- flex-shrink 만약 컨테이너에 충분한 공간이 없을 때 요소의 크기를 분배해준다.

- flex-basis 는 width 등의 기본값. grow나 shrink의 영향을 받을 수 있다. 

- gap으로 각 box의 간격을 줄 수 있다.

- flex-wrap으로 줄바꿈을 할 수 있다.