개구리와 연못으로 flex 속성에 대해서 재밌게 배워보자
https://flexboxfroggy.com/#ko
display: flex;, justify-content, align-items
이것들은 항상 헷갈리던 속성이었는데, 문제를 따라가면서 쉽게 파악할 수 있었다.
고민했던 마지막 문제 답!
#pond {
display: flex;
flex-flow: column-reverse wrap-reverse;
align-content: space-between;
justify-content: center;
}justify-content
Flex 요소들은 가로선 상에서 정렬합니다.
flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다.
flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다.
center: 요소들을 컨테이너의 가운데로 정렬합니다.
space-between: 요소들 사이에 동일한 간격을 둡니다.
space-around: 요소들 주위에 동일한 간격을 둡니다.
align-items
Flex 요소들은 세로선 상에서 정렬합니다.
flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다.
flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다.
center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다.
baseline: 요소들을 컨테이너의 시작 위치에 정렬합니다.
stretch: 요소들을 컨테이너에 맞도록 늘립니다.
flex-direction
정렬할 방향을 지정합니다.
row: 요소들을 텍스트의 방향과 동일하게 정렬합니다.
row-reverse: 요소들을 텍스트의 반대 방향으로 정렬합니다.
column: 요소들을 위에서 아래로 정렬합니다.
column-reverse: 요소들을 아래에서 위로 정렬합니다.
align-self
align-items가 사용하는 값을 인자로 받으며, 개별 요소에 적용할 수 있는 또 다른 속성입니다.
flex-wrap
Flex 요소들을 한 줄 또는 여러줄에 걸쳐 정렬합니다.
nowrap: 모든 요소들을 한 줄에 정렬합니다.
wrap: 요소들을 여러 줄에 걸쳐 정렬합니다.
wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬합니다.
flex-row
flex-direction 와 flex-wrap 을 하나로 합친 속성입니다.
예를 들어, 요소들을 가로선 상의 여러줄에 걸쳐 정렬하기 위해 flex-flow: row wrap라고 사용할 수 있습니다.
align-content
여러 줄일때, Flex 컨테이너 사이의 간격을 지정합니다.
flex-start: 여러 줄들을 컨테이너의 꼭대기에 정렬합니다.
flex-end: 여러 줄들을 컨테이너의 바닥에 정렬합니다.
center: 여러 줄들을 세로선 상의 가운데에 정렬합니다.
space-between: 여러 줄들 사이에 동일한 간격을 둡니다.
space-around: 여러 줄들 주위에 동일한 간격을 둡니다.
stretch: 여러 줄들을 컨테이너에 맞도록 늘립니다.
