📝CSS의 Flexbox 이해하기

이번 글을 작성하는 이유는 CSS를 배우면서 Flexbox 속성을 자주 까먹고 있어서, 내가 공부하면서 보기 편하게 정리해두려고 합니다. 모든 공부 완료 후 좀 더 CSS에 대해서 이해하게 된다면 좀 더 자세히 내용을 보완하려고 합니다. 아직 많이 부족하여 내용이 틀리거나 다를 수도 있습니다.

❓Flexbox

✅︎ display: flexbox의 container 지정속성 값

• flex-direction: 주축 방향을 설정합니다. row(기본값), row-reverse, column, column-reverse 중 선택할 수 있습니다.

• flex-wrap: 아이템들이 한 줄에 모두 표시되지 않을 때 줄바꿈 여부를 설정합니다. nowrap(기본값), wrap, wrap-reverse 중 선택할 수 있습니다.

• flex-flow: flex-direction과 flex-wrap을 한 번에 설정할 수 있습니다. 예를 들어 "row wrap"과 같이 입력합니다.

• justify-content: 주축 방향으로 아이템들을 정렬합니다. flex-start(기본값), flex-end, center, space-between, space-around, space-evenly 중 선택할 수 있습니다.

• align-items: 교차축 방향으로 아이템들을 정렬합니다. stretch(기본값), flex-start, flex-end, center, baseline 중 선택할 수 있습니다.

• align-content: 여러 줄의 아이템들을 교차축 방향으로 정렬합니다. stretch(기본값), flex-start, flex-end, center, space-between, space-around 중 선택할 수 있습니다.

✅︎ display: flexbox의 item 지정속성 값

• order: 아이템의 순서를 지정합니다. 숫자가 작을수록 앞으로 배치됩니다.

• flex-grow: 아이템이 flex 컨테이너에서 차지할 수 있는 비율을 지정합니다. 0(기본값)이면 늘어나지 않습니다.

• flex-shrink: 아이템이 flex 컨테이너에서 줄어들 수 있는 비율을 지정합니다. 1(기본값)이면 자유롭게 줄어듭니다.

• flex: flex-grow, flex-shrink, flex-basis를 한 번에 설정할 수 있습니다. 예를 들어 "1 1 auto"와 같이 입력합니다.

• align-self: 개별 아이템의 교차축 정렬을 설정합니다. auto(기본값), flex-start, flex-end, center, baseline, stretch 중 선택할 수 있습니다.