Flexbox Froggy에서 배운 것: 항목 속성

부트캠프에서 Flexbox를 배우는 재미에 브릴리언트Flexbox Froggy 챌린지에 도전해봤습니다. 저는 24개 레벨을 모두 완료했지만, 패턴 일치, 무차별 대입 방식이었습니다. 결국 나는 아무것도 배우지 못한 것 같은 기분이 들었다.

오늘, 몇 달 후, 나는 Flexbox Froggy에서 다시 내 손을 시도하기로 결정했습니다. 항목 속성에 대해 배운 내용은 다음과 같습니다( . (스포일러: 컨테이너의 설정을 재정의하는 것이 전부입니다)

컨테이너의 순서 재정의

flex-direction를 사용하여 기본 축과 컨테이너의 순서를 정의합니다. 그 정도면 충분하지 않습니까? 글쎄, 어떤 이유로 부모 컨테이너의 정의된 순서와 별개로 항목의 순서를 정의하려는 경우 다음 예가 있습니다.

예: 이전

#pond {
  display: flex;
  // nothing here yet
}

예: 후

#pond {
  display: flex;
  flex-direction: column;
}

컨테이너의 수직 정렬 재정의

align-items를 사용하여 교차 축을 따라 컨테이너 내용의 정렬을 지정합니다. 이를 재정의하려면 여기에서와 같이 align-self를 사용할 수 있습니다.

예: 이전

#pond {
  display: flex;
  align-items: flex-start;
}

.yellow {
  // nothing here yet
}

예: 후

#pond {
  display: flex;
  align-items: flex-start;
}

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

옵션

align-self: flex-start : 항목을 컨테이너 상단에 세로로 정렬합니다

.

align-self: flex-end : 항목을 컨테이너 하단에 세로로 정렬합니다

.

align-self: center : 항목을 컨테이너 중앙에 세로로 정렬합니다

.

align-self: stretch : 항목을 컨테이너 상단에서 컨테이너 하단까지 세로로 늘리기

align-self: baseline : 텍스트가 있는 컨테이너의 기준선에 대해 각 항목을 수직으로 중앙에 배치합니다

.

다음: Flexbox Froggy에서 배우지 못한 것!