[ CSS ] Flexbox

🔴  Wrapper 속성

 

display: flex;
flex-direction: row | column | row-reverse | column-reverse;

justify-content: flex-start;
align-items: flex-start;  /* 한 줄인 아이템의 수직 정렬 */
align-content: flex-start; /* 두 줄 이상인 아이템의 수직 정렬 */

/* flex는 기본적으로 아이템을 한 줄에 배치시킨다. */
/* 아이템들이 한 줄에 들어가기 어려우면 크기를 변경시킨다. */
flex-wrap: nowrap | wrap;
/* wrap 속성 적용 시, 아이템의 크기를 유지한다. */

 

🟠  Child 속성

 

/* 수직 방향으로 하나의 child만 가운데 정렬 */
align-self: flex-start;
/* 순서를 변경할 수 있다. order -> HTML 우선순위로 결정한다 */
order: 0 | 1;
/* 화면 크기를 줄였을 때, 비례하는 만큼 화면의 줄어드는 정도를 정할 수 있다. */
flex-shrink: 0 | 1;
/* 화면에 남는 여백이나 여유 공간들을 가져와서 child의 크기를 그만큼 비례하여 넓힌다. */
flex-grow: 0 | 1;

 

🟡  Froggy 예제

Flexbox Froggy

 

/* Level 10 */
#pond {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

 

/* Level 17 */
#pond {
  display: flex;
  align-items: flex-start;
}

.yellow {
  order: 1;
  align-self: flex-end;
}

 

/* Level 18 */
#pond {
  display: flex;
  flex-wrap: wrap;
}

 

/* Level 19 */
#pond {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

 

/* Level 23 */
#pond {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column-reverse;
  align-content: center;
}

 

/* Level 24 */
#pond {
  display: flex;
  flex-direction: column-reverse;
  flex-wrap: wrap-reverse;
  justify-content: center;
  align-content: space-between;
}