CSS Flexbox

HTML

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

CSS - container

.container {
  display: flex;
  
  /* flex-direction */
  flex-direction: row; //기본값. 왼쪽- > 오른쪽
  flex-direction: row-reverse; 오른쪽 -> 왼쪽
  flex-direction: column; // 위 -> 아래
  flex-direction: column-reverse; // 아래 -> 위
  
  /* flex-wrap */
  flex-wrap: nowrap; // 기본값. 폭이 좁아져도 아이템이 한 줄에 있음.
  flex-wrap: wrap; // 아이템이 한 줄에 꽉 차면 다음 줄로 넘어감.
  flex-wrap: wrap-reverse; // 다음줄로 넘어가는데, 줄 순서가 아래 -> 위
  
  /* flex-flow */
  /* flex-direction과 flex-wrap을 합친 것 */
  flex-flow: row wrap;
  
  /* justify-content */
  /* 아이템을 중심축 어떻게 배치할지 */
  justify-content: flex-start; // 기본값. 첫번째 아이템을 기준으로 정렬. 여백 없음.
  justify-content: flex-end; // 마지막 아이템을 기준으로 정렬. 여백 없음.
  justify-content: center; // 아이템이 가운데로. 아이템 첫번째, 마지막 여백 동일
  justify-content: space-around; // 아이템 양쪽 여백이 동일하게.
  justify-content: space-evenly; // 아이템 사이의 여백이 균등하게
  justify-content: space-between; // 아이템 양쪽 끝 바깥 여백 없음. 아이템 사이 여백은 균등.
  
  /* align-items */
  /* 아이템을 중심축 반대에서 어떻게 배치할지 */
  align-items: stretch; // 기본값. 아이템이 수직축 방향으로 꽉차게 늘어남.
  align-items: flex-start; // 첫번째 아이템을 기준으로 정렬.
  align-items: flex-end; // 마지막 아이템을 기준으로 정렬.
  align-items: center; // 아이템을 가운데로 정렬.
  align-items: baseline; // 아이템을 텍스트 베이스라인 기준으로 정렬
  
  /* align-content */
  /* flex-wrap: wrap;이 설정된 상태에서 아이템의 행이 2줄 이상 되었을 때 수직축 방향으로 어떻게 배치할지 */
  align-content: stretch; // 기본값. 수직축 방향으로 꽉차게 늘어난다.
  align-content: flex-start; 
  align-content: flex-end;
  align-content: cetner;
  align-content: space-between;
  align-content: space-around;
  align-content: space-evenly;
}

CSS - item

.item {
  /* flex-basis */
  /* flex 아이템의 기본 크기 설정(최소값) */
  /* row일 때는 width값, column일 때는 높이 */
  flex-basis: auto; // 기본값
  flex-basis: 100px;
  flex-basis: 50%;
  flex-basis: 10rem;
  flex-basis: content;
  
  /* flex-grow */
  /* 아이템이 flex-basis의 값보다 커질 수 있는지 결정 */
  /* 0보다 큰 값이 세팅되면 원래 크기보다 커지며 빈 공간을 메우게 됨 */
  flex-grow: 0 // 기본값. 
  
  /* flex-shrink */
  /* 아이템이 flex-basis의 값보다 작아질 수 있는지 결정 */
  /* 0으로 세팅되면 flex-basis보다 작아지지 않기 때문에 고정폭 컬럼을 만들 수 있음 */
  flex-shrink: 1;/ //기본값
 
  /* flex */
  /* flex-grow, flex-shrink, flex-basis의 축약형 */
  flex: 1; // flex-grow: 1; flex-shrink: 1; flex-basis: 0%;
  flex: 1 500px; // flex-grow: 1; flex-shrink: 1; flex-basis: 500px
  
  /* align-self */
  /* 아이템 개별적으로 수직축 정렬할 수 있음 */
  align-self: center;
  
  /* order*/
  /* 임의로 배치 순처를 결정. 시각적 순서이므로 접근성 측면에서 주의 */
  order: 3;
  
}