개구리 게임과 함께하는 CSS Flex 정리

개구리게임에 참가하시겠습니까?

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
[css 연습게임] Flexboc Froggy

justify-content

• flex-start: 요소들을 컨테이너의 왼쪽으로 정렬
• flex-end: 요소들을 컨테이너의 오른쪽으로 정렬
• center: 요소들을 컨테이너의 가운데로 정렬
• space-between: 요소들 사이에 동일한 간격을 둠
• space-around: 요소들 주위에 동일한 간격을 둠

align-items

• flex-start: 요소들을 컨테이너의 꼭대기로 정렬
• flex-end: 요소들을 컨테이너의 바닥으로 정렬
• center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬
• baseline: 요소들을 컨테이너의 시작 위치에 정렬
• stretch: 요소들을 컨테이너에 맞도록 늘림

flex-direction

• row: 요소들을 텍스트의 방향과 동일하게 정렬
• row-reverse: 요소들을 텍스트의 반대 방향으로 정렬
• column: 요소들을 위에서 아래로 정렬
• column-reverse: 요소들을 아래에서 위로 정렬

• order:0; 기본값이고, 양수나 음수로 위치 변경 가능
• align-self: 개별요소에 적용할 수 있는 또 다른 속성, align-items가 사용하는 값들을 인자로 받으며, 그 값들은 지정한 요소에만 적용

flex-wrap

• nowrap: 모든 요소들을 한 줄에 정렬
• wrap: 요소들을 여러 줄에 걸쳐 정렬
• wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬

flex-flow

• flex-direction flex-wrap 같이 쓸 수 있음
• flex-flow : flex-direction flex-wrap;

align-content

• flex-start: 여러 줄들을 컨테이너의 꼭대기에 정렬
• flex-end: 여러 줄들을 컨테이너의 바닥에 정렬
• center: 여러 줄들을 세로선 상의 가운데에 정렬
• space-between: 여러 줄들 사이에 동일한 간격을 둠
• space-around: 여러 줄들 주위에 동일한 간격을 둠
• stretch: 여러 줄들을 컨테이너에 맞도록 늘림