[SeSAC] CSS(Flex)

구성 요소들을 유연하게 만들어주는 역할을 한다.

부모요소에 display: flex;를 적용하여 컨테이너를 만들어 자식요소에 적용할 수 있다.

자손들에게는 적용되지 않아 추가로 속성을 작성해야 한다.

부모요소와 자식요소에게 부여하는 속성 값을 정리해보자

부모 요소

플렉스 컨테이너에 해당한다.

• justify-content : 주 축(main-axis)을 따라 플렉스 아이템을 정렬한다.
  • flex-start : 아이템을 시작점에 정렬
  • flex-end : 아이템을 끝점에서 정렬
  • center : 아이템을 가운데 정렬
  • space-between : 아이템 사이에 동일한 간격, 양 끝에 여백이 없다.
  • space-around : 아이템 주위에 동일한 간격, 양 끝에 동일한 여백이 있다.
• flex-direction : 플렉스 아이템이 배치될 방향을 설정한다.
  • row (기본값) : 왼쪽에서 오른쪽으로 수평 배치
  • row-reverse : 오른쪽에서 왼쪽으로 수평 배치
  • column : 위에서 아래로 수직 배치
  • column-reverse : 아래에서 위로 수직 배치
• align-items : 교차 축(cross-axis)을 따라 플렉스 아이템을 정렬한다.
  • stretch (기본값) : 아이템이 컨테이너 높이에 맞춰 늘어난다.
  • flex-start : 교차 축의 시작점에서 정렬
  • flex-end : 교차 축의 끝점에서 정렬
  • center : 교차 축의 중앙에서 정렬
  • baseline : 텍스트 기준선에 맞춰 정렬
• flex-wrap : 아이템이 한 줄에 다 들어가지 않을 때 어떻게 처리할지 결정한다.
  • nowrap (기본값) : 줄바꿈 없음
  • wrap : 여러 줄로 나눠 배치
  • wrap-reverse : 역순으로 줄바꿈

자식 요소

플렉스 아이템으로 각 자식 요소마다 속성을 부여한다.

각 아이템은 주어진 공간(남는 공간)에 따라 유연하게 조정된다.

플렉스 컨테이너(부모요소)가 충분히 크다면 남는 공간이 발생하는데 이부분을 조절한다.

• align-self : 특정 아이템의 교차 축 정렬 방식을 지정한다.
  • 기본값은 auto 이며, 속성에 값을 지정하면 컨테이너(부모 요소)의 align-items 속성을 덮어쓴다.
  • flex-start : 아이템을 교차 축의 시작점에 정렬
  • flex-end : 아이템을 교차 축의 끝점에 정렬
  • center : 아이템을 교차 축의 가운데에 정렬
  • baseline : 아이템을 텍스트의 기준선에 맞춰 정렬
• flex-grow
  • 아이템이 컨테이너 내에서 남은 공간을 얼마나 채울지를 결정한다.
  • 기본값은 0 이며, 값이 클수록 더 많은 공간을 차지한다.
• flex-shrink
  • 공간이 부족할 때 아이템이 얼마나 줄어들지를 결정한다.
  • 기본값은 1이며, 0으로 설정하면 아이템이 줄어들지 않는다.
• flex-basis
  • 플렉스 아이템의 기본 크기를 설정한다.
  • 아이템의 최소 너비나 높이를 설정할 수 있다.

---

flex를 연습할 수 있는 사이트이다.

가볍게 개념을 잡기 좋은 듯하다

첫번째 문제의 답은 justify-content: flex-end 이다

https://flexboxfroggy.com/#ko

Flexbox Froggy