[카카오테크캠퍼스 4주차] CSS 속성: flex

⏳ 2023. 5. 1. - 2023. 5. 7.

 

flex

flex는 주 축(main-axis)과 교차 축(cross-axis) 중 주 축을 기준으로 요소들을 정렬하기 위한 방법이다.

보통 수평으로 정렬하기 위해 사용된다.

flex-direction

• flex-direction: row; -> 행(좌 => 우)
  • row-reverse : 행(우 => 좌)
  • column : 열(위 => 아래)
  • column-reverse : 열(아래 => 위)

flex-wrap

• flex-wrap: nowrap; -> 줄바꿈 없음
  • wrap : 여러 줄로 묶음

justify-content

주 축의 정렬 방법

• jusify-content: flex-start;

align-content

교차 축의 여러 줄 정렬 방법

• align-content: stretch;

align-items

교차 축의 한 줄 정렬 방법

• align-items: stretch;

flex-grow

flex item의 증가 너비 비율

• flex-grow: 0;

flex-shrink

flex item의 감소 너비 비율

• flex-shrink: 1;
  • 0 : 감소 비율을 0으로 지정하면 flex item이 감소하지 않음

flex-basis

flex item의 공간 배분 전 기본 너비

• flex-basis: auto; -> 요소의 콘텐츠 너비

따로 flex-basis 값을 부여하지 않으면 콘텐츠 너비를 제외한 나머지 너비가 비율대로 결정된다.

이렇게 사용하는 것은 상당히.. 이상하니까 다음과 같은 방법을 사용하자.