Flexbox - container

김예희·2023년 7월 15일

가로 혹은 세로의 직선의 요소들을 정렬하고 싶을 때 사용한다.
정렬하고 싶은 아이템들의 부모에 display: flex;를 넣어서 자연스럽게 정렬하게 만든다.
=> 아이템, 부모 둘 다 존재해야 한다.

✔️item이 아닌 container에 사용할 수 있는 속성이다.

flex-direction

총 4가지를 결정할 수 있다.

주축의 위치
1) 수평 horizontal
2) 수직 vertical

주축의 방향
3) 정방향
4) 역방향

값으로는

row: flex container의 주 축이 글의 작성 방향과 동일하게 왼쪽 -> 오른쪽
row-reverse: row와 동일하게 작동하지만 반대로. 오른쪽 -> 왼쪽
column: flex container의 주 축이 블록 축과 동일하다. 위 -> 아래
column-reverse: 아래 -> 위

flex-warp

wrap: flex-item 요소들이 내부 로직에 의해 분할되어 여러 행에 걸쳐서 배치된다. 일반적으로 위 -> 아래 순이다. 자신의 사이즈를 잃지 않고 유지하면서 배치가되므로
wrap-reverse: wrap 속성값과 동일하지만, 요소가 나열되는 시작점과 끝점의 기준이 반대로 배치된다.

flex-flow

flex-direction과 flex-wrap을 한 줄로 작성할 수 있게 한다.

풀어서 작성:
flex-direction: column;
flex-wrap: wrap;
한 줄로 작성:
flex-flow: column wrap;

justify-content

주축을 기준으로 아이템들을 어떻게 정렬할 것인지 설정한다.

justify-content: flex-start; : 기본값으로 설정된 주축의 시작점은 왼쪽 위 이므로, 그 지점부터 나란히 정렬된다.

justify-content: flex-end; : 주축이 끝나는 위치 까지 아이템들이 정렬된다. 마치 오른쪽 정렬처럼 보인다. (1,2,3,4,5)
❗️만약 여기서 flex-direction: row-reverse;를 넣으면 순서가 반대로 되기 때문에 마지막 아이템은 왼쪽 끝에 붙게된다. (마치 왼쪽 정렬처럼 5,4,3,2,1)

justify-content: center; : 가운데 정렬이 된다.

justify-content: space-between; : 아이템들 사이의 간격이 동일하게 띄어지게 된다. 그리고 아이템들이 여백없이 꽉 채운다.

justify-content: space-around; : 한 아이템의 양쪽에 동일한 간격이 주어진다. 첫번째와 마지막 아이템에도 양쪽으로 동일한 간격이 주어지므로 양쪽 끝에 여백이 남게된다.