Flex 2

[FLEXBOX FROGGY] CSS 개구리 게임 3(14~20)

14단계 - 아이템 요소 개개인 순서 지정 order : flex 요소의 순서를 지정 order의 기본 값은 0이며, 양수나 음수로 바꿀 수 있습니다. 15 단계 - order 음수 16단계 align-self : 지정된 "align-items"값을 무시하고 flex요소를 세로선 상에서 정렬합니다. 17단계 18단계 flex-wrap : flex 요소들을 한 줄 또는 여러 줄에 걸쳐 정렬합니다. nowrap: 모든 요소들을 한 줄에 정렬합니다. wrap: 요소들을 여러 줄에 걸쳐 정렬합니다. wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬합니다. 19단계 flex-direction : 정렬한 방향을 지정합니다. 20단계 flex-flow : flex-direction 과 flex-wrap ..

html-css 2021.08.09

[FLEXBOX FROGGY] CSS 개구리 게임 1 (1~7)

1단계 - 오른쪽 정렬 justify-content : flex요소들을 가로선 상에서 정렬 flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다. (default) flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다. center: 요소들을 컨테이너의 가운데로 정렬합니다. space-between: 요소들 사이에 동일한 간격을 둡니다. space-around: 요소들 주위에 동일한 간격을 둡니다. 2단계 - 가운데 정렬 3단계 - flex 주위 간격 설정 4단계 - 요소 간격 5단계 - 세로 정렬 align-items : flex 요소를 세로선 상에서 정렬 flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다. flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다. center:..

html-css 2021.08.09