flexbox froggy 정답 해설 기록✔️(16~20) - 5단계씩 정리 😀 총 24단계

16단계
align-self: flex-end;

align-self는 flex-items 속성으로 이전 포스팅에서 다뤘던 order 속성에 이은 두 번째 flex-items 속성이다.
즉, 개별 요소에 적용할 수 있는 속성이다.

align-self는 align-items 값을 재정의한다. grid에서는 grid area 항목을 정렬하고,
flexbox에서는 cross axis 항목을 정렬한다.

align-self 속성은 flex 컨테이너의 아이템에 적용되며, 해당 아이템의 교차 축(cross axis)에서의 정렬을 지정하는데 사용된다. 이 속성을 통해 개별적으로 특정 Flex 아이템의 정렬을 제어할 수 있다.

일반적으로 align-items 속성은 flex 컨테이너 내 모든 아이템의 교차 축 정렬을 지정하는 데 사용되지만, 때로는 특정 아이템에 대해 다른 정렬을 적용하고 싶을 수 있다. 이 때 align-self가 유용하다.

align-self 속성은 아래와 같은 값들을 가질 수 있다.
✔️auto : 부모 Flex 컨테이너에서 정의된 align-items 속성을 상속받는다.
✔️flex-start : 교차 축의 시작 부분에 정렬한다.
✔️flex-end : 교차 축의 끝 부분에 정렬한다.
✔️center : 교차 축에서 가운데 정렬한다.
✔️baseline : 교차 축에서 기준선에 정렬한다.
✔️stretch : 아이템이 교차 축에서 전체 높이를 채우도록 늘어난다.

---

17단계
order: 1;
align-self: flex-end;

flex item 속성 두 가지를 같이 활용해보자
order: 1;을 통해 노란색 개구리를 주축 기준 수평이니까 오른쪽으로 이동시킨다.
align-self: flex-end;를 통해 수직 기준 바닥으로 정렬시킨다.

---

18단계
flex-wrap: wrap;

wrap을 통해 여러 줄을 걸쳐 정렬한다.

---

정답과 관련은 없지만, flex-wrap 속성에 대해 알아보기 위해 nowrap과 wrap-reverse를 적용시켜보자

우선 wrap-reverse를 한다면 어떻게 될까?

요소들을 여러 줄에 걸쳐 반대로 정렬한다!!

nowrap은 기본값이어서 변화가 없다.

---

19단계
flex-direction: column;
flex-wrap: wrap;

flex-direction: column;을 통해서 주축을 수직으로 만들어준다.
flex-wrap: wrap;을 통해서 여러 줄에 걸쳐 정렬한다.

---

20단계
flex-flow: column wrap;

flex-direction과 flex-wrap이 자주 같이 사용되기 때문에, flex-flow가 이를 대신할 수 있다.
이 속성은 공백문자를 이용하여 두 속성의 값들을 인자로 받는다.

예를 들어, 요소들을 가로선 상의 여러줄에 걸쳐 정렬하기 위해 flex-flow: row wrap을 사용할 수 있다.
flex-flow를 사용하면 아래와 같이 된다.

 

https://stylish-minyoung.tistory.com/140

마지막 포스팅이다.

flexbox froggy 정답 해설 기록✔️(21~24) - 마지막 😀 총 24단계