display 속성 - flex

display: flex

.container {
  display: flex;
}

1차원 레이아웃. container와 items로 이루어지며 items를 수평정렬한다

• flex container : display: flex가 적용된 요소. 블럭요소처럼 정의된다.

• flex items : flex container 내의 자식요소. flex items가 되는 순간 수평으로 정렬된다.
  
  
  

flex container 속성

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: start;
  align-items: end;
}

• flex-direction : 주축 방향 설정

  • row : 기본값. 행축 수평정렬
  • row-reverse : 행축 역방향 수평정렬
  • column : 열축 수직정렬
  • column : 열축 역방향 수직정렬

• flex-wrap : 다음 줄로 items를 넘겨줄지 여부

  • nowrap : 기본값. 줄바꿈 없음
  • wrap : 여러줄로 묶음

• justify-content : 주축(main-axis)에 대한 items의 정렬방법

  • start : 기본값. 시작점으로 붙임
  • end : 끝점으로 붙임
  • center : 중앙 정렬
  • space-between : 첫 item과 마지막 item을 양 끝에 붙이고 나머지를 균등한 간격으로 정렬
  • space-around : 빈 공간을 item의 양쪽에 같은 너비로 붙도록 균등 분배해 정렬
  • space-evenly : 빈 공간을 균등하게 분배해 같은 거리만큼 떨어져 있도록 정렬

• align-content : 교차축에 대한 items 여러줄의 정렬방법. 여백이 있고 flex-wrap이 적용 되어있어야 함.

  • stretch : 기본값. height를 지정하지 않을 시 교차축 방향으로 최대한 늘어남
  • start : 시작점으로 붙임
  • end : 끝점으로 붙임
  • center : 중앙 정렬

• align-items : 교차축(corss axis)에 대한 items 한 줄의 정렬방법

  • 유효한 값이 align-content와 같음

flex items 속성

.container {
  display: flex;
}

.item {
  order: 1;
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 0;
  align-self: start;
}

• order : item의 정렬 순서 지정. HTML 구조를 바꾸지 않으면서 요소들의 순서를 변경힘

  • 0 : 기본값. 순서 없음
  • 숫자 : 작은 숫자 먼저 정렬

• flex-grow : item의 자체 크기를 제외한 증가 너비 비율. 브라우저 크기에 따라 유동적으로 크기 결정

  • 0 : 기본값. 증가 비율 없음
  • 1 : 최대한 늘어남
  • 숫자 : 0인 items를 제외한 나머지 공간을 증가 비율을 가진 items끼리 각각의 비율로 증가함

• flex-shrink : item의 감소 너비 비율

  • 1 : 기본값. container의 너비에 따라 비율 변화
  • 0 : containter의 너비에 상관없이 item의 너비가 감소하지 않음
  • 숫자 : 해당 비율에 따라 너비 감소

• flex-basis : 공간을 배분하기 전 item의 기본 너비

  • auto : 기본값. 요소의 content 너비
  • 0 : 요소의 기본 너비가 없음

• align-self : 개별 item에 대한 교차축 정렬

  • 유효한 값이 align-content와 같음