CSS Flex/justify-contents/align-contents/Flex Items

Flex

• flex는 container와 items로 나뉨

• container는 items를 감싸는 부모 요소

• items를 정렬하기 위해 container가 필요함

• container는 display, flex-flow, justify-content 등을 사용

• items는 order, flex, align-self 등의 속성 사용

Flex Container

display

• flex container를 정의

• display: flex;->블록요소처럼 활용 됨(위에서 아래로 쌓임)

• display: inline-flex;->인라인요소처럼 활용 됨(좌우로 쌓임)

flex-flow

flex-direction

• items의 주축(main-axis)을 설정

• row: 수평축으로 표시

• row-reverse: row의 반대축으로 표시

• column: 수직으로 표시

• column-reverse: column의 반대축으로 표시

• 주 축(main-axis)과 교차 축(cross-axis)

• 주 축과 수직 관계에 있는 것이 교차 축임

• 시작점(flex-start)과 끝점(flex-end)

• 주 축이나 교차 축의 시작하는 지점과 끝나는 지점 지칭

• 주 축의 시작점과 끝점은 진행 방향에 따라 달라짐

• 교차 축의 시작점과 끝점은 무조건 위에서 아래 혹은 좌에서 우 방향임

flex-wrap

• items의 여러 줄 묶음 여부를 설정

• nowrap: 모든 items를 여러 줄로묶지 않음

• wrap: items를 여러 줄로 묶음

• wrap-reverse: itmes를 wrapdml 역방향으로 여러줄로 묶음

justify-content

• 주 축의 정렬 방법을 설정함

• flex-start: 왼쪽 정렬(items를 시작점으로 설정)

• flex-end: 오른쪽 정렬(끝점으로 정렬)

• center: 가운데 정렬

• space-between: 양쪽 정렬

• space-around: 균등한 여백을 포함해 정렬(양쪽정렬과 비슷하나 끝에 맞춰져 있지 않음)

align-content

• 교차 축의 정렬 방법 설정

• flex-wrap을 통해 여러 줄 묶음상태일때만 사용 가능함(한줄일 경우 align-itmes 사용)

• stretch: container의 교차 축을 채우기 위해 items를 늘림

• flex-start: 왼쪽 정렬(items를 시작점으로 설정)

• flex-end: 오른쪽 정렬(끝점으로 정렬)

• center: 가운데 정렬

• space-between: 양쪽 정렬

• space-around: 균등한 여백을 포함해 정렬(양쪽정렬과 비슷하나 끝에 맞춰져 있지 않음)

align-items

• 교차 축에서 items의 정렬 방법 설정

• items가 한 줄일 경우 많이 사용함

• flex-wrap을 통해 여러 줄일 경우, align-content 속성이 우선

• align-itmes를 사용하려면 align-content 속성을 stretch로 설정해야 함

• stretch: container의 교차 축을 채우기 위해 items를 늘림

• flex-start: items를 각 줄의 시작점으로 정렬

• flex-end: items를 각 줄의 끝점으로 정렬

• center: 가운데 정렬

• baseline: items를 문자 기준선에 정렬

Flex Items

order

• flex item의 순서 설정

• item에 숫자 지정하고 숫자가 클수록 순서가 밀림

• 음수가 허용 됨

• html 구조와 상관없이 순서 변경 가능

flex-grow

• item의 증가 너비 비율을 설정

• 숫자가 크면 더 많은 너비를 가짐

• item이 가변 너비가 아니거나 값이 0이면 효과가 없음

• 가변너비를 줘야할 때 주로 사용함

• flex-grow: 증가너비;

flex-shrink

• item이 감소하는 너비의 비율 설정

• 숫자가 크면 더 많은 너비가 감소함

• item이 가변 너비가 아니거나, 0일 경우 효과 없음

flex-basis

• item의 공간 배분 전 기본 너비 설정

• auto일 경우 width, height 등의 속성으로 item의 너비를 설정할 수 있음

• 단위 값이 주어지면 설정할 수 없음

flex

• item의 너비를 설정하는 단툭 속성

• flex: 증가너비(0) 감소너비(1) 기본너비(0);

align-self

• 교차 축에서 개별 item의 정렬 방법 설정

• align-items는 container 내 모든 items의 정렬 방법 설정

• 일부 item만 정렬 방법 변경할 경우 align-self 사용 가능

• auto container의 align-items의 속성을 받음

• stretch: container의 교차 축을 채우기 위해 items를 늘림

• flex-start: items를 각 줄의 시작점으로 정렬

• flex-end: items를 각 줄의 끝점으로 정렬

• center: 가운데 정렬

• baseline: items를 문자 기준선에 정렬