Flexbox란?

• 가로 또는 세로 처럼 1차원으로 요소를 배치하는 방법
• 기본적으로 row 방향으로 배치함
• felx-direction으로 방향을 정할 수 있음

정렬

• 기본 축(main axis): 요소가 정렬되는 방향
• 교차 축(cross axis): 기본 축에 수직인 방향
• 기본적으로 기본 축 방향으로 교차 축에 꽉 채워서 정렬됨
• justify-content: 기본축 방향에서 정렬하기 (center, space-between, flex-start, flex-end)
• align-items: 교차축 방향에서 정렬되며 요소의 원래 크기로 돌아옴

요소가 넘칠 때

• flex-wrap: wrap
• wrap: 넘치는 요소가 교차축 방향으로 넘어가서 배치됨

간격

• gap: 30px (요소가 넘쳤을 때 교차축 방향으로도 적용됨)
• gap: 30px 60px: 세로 방향으로 30px, 가로 방향으로 60px의 간격을 줌

요소 꽉 채우기

• witdh나 height 값으로 크기가 결정되지 않고 요소의 크기가 유연함

flex-grow

• 요소를 늘려서 빈 공간을 꽉 채우고 싶을 때 쓰는 속성
• 기본값은 0이며 값은 상대적이어서 숫자에 비례해서 늘어남
• 빈 공간을 채우고 싶을 때: flex-grow: 1
  
  

flex-shrink

• 요소들의 크기가 커서 넘치는 경우 요소의 크기를 줄여서 플렉스 박스 안에 가득 채우는데 0으로 지정하면 크기가 줄지 않음
• 기본값은 1이며 값이 클수록 더 많이 줄어듦
• 요소의 크기를 내가 원하는 대로 고정하고 싶을 때: flex-shrink: 0
  

크기를 정하고 싶을 때

• 플렉스박스에서는 고정된 크기가 있는 게 아니라 시작 크기와 최종 크기가 있음
• flex-basis: 플렉스박스에서 요소의 시작크기를 지정함
• 기본값: auto

flex 속성

• flex-grow, flex-shrink, flex-basis 값을 한 번에 쓸 수 있는 속성

width 속성으로 시작 크기를 지정하기
flex-grow: 1;
flex-shrink: 0;
width: 100px;

flex-basis 속성으로 시작 크기를 지정하기
flex-grow: 1;
flex-shrink: 0;
flex-basis: 100px;

flex 속성으로 짧게 쓰기
flex: 1 0 100px;

인라인 안에서 Flexbox 만들기

• 인라인 요소를 display: flex하면 마치 inline 성질이 사라져서 block 처럼 위에서 아래로 배치 됨
• display: inline-flex를 이용하면 인라인 처럼 배치되는 플렉스 박스를 만들 수 있음

Flexbox 안에서 포지셔닝 하기

• relative, sticky는 요소의 원래 자리를 차지하기 때문에 플렉스박스의 영향을 받음
• absolute랑 fixed는 요소의 원래 자리에서 쏙 빠져버리기 때문에 글의 흐름에서 빠지는 거랑 마찬가지로, 플렉스박스랑 상관없이 배치되며 flex-grow: 1도 적용 되지 않음

궁금증: 오른쪽 맨 끝의 .time의 정렬을 오른쪽 끝으로 하고 싶은데justify-content: flex-end;가 안됨

해결법: display: flex;를 함께 써줘야 함

.time {
  color: #8c8993;
  flex-basis: 300px;
  display: flex;
  justify-content: flex-end;
}