Flexbox Froggy
A game for learning CSS flexbox
flexboxfroggy.com
#17. order, align-self 쓰기
order: 5
align-self: flex-end
=> yellow 둘만 가장 오른쪽으로 놓으려고 하니까 yellow로 둘을 잡고 가장 큰 order를 넣으면 된다
(order는 숫자가 가장 작은 숫자부터 가장 큰 숫자로 오름차순 : 순차적일 필요 없다)
=> 그러면 나머지들은 자동으로 order가 yellow 둘보다 낮아지므로 가장 왼쪽으로 붙게 된다
#20. flex-flow 쓰기
flow는 flex-direction, flex-wrap을 동시에 쓸 수 있다. 사이에 space를 한번만 하면 된다.
=> flex-flow: column wrap;
#21. align-content 쓰기
align-items는 모든 요소을 가지고 정렬
align-content는 여러 줄이 있을 때 줄을 하나처럼 사이 간격 조절 가능
대신 쓰기 전에 flex-wrap: wrap이 되어 있어야 한다
align-content: stretch; => container의 높이에 맞춰서 늘인다
/* align-content: flex-start; */
/* align-content: flex-end; */
/* align-content: center; */
/* align-content: space-between; */
/* align-content: space-around; */
/* align-content: space-evenly; */
}
#24.
flex-direction 바꿀 때 유의점
: row는 왼-> 오
column은 위->아래
=> 그러므로 서로 바꿀 때도 그대로 가장 왼쪽이었던 item이 가장 위로 올라간다
: wrap도 direction을 column으로 바꾸면 그냥 쓰면 오른쪽 수직축으로,
wrap-reverse 쓰면 왼쪽 수직축으로 움직인다
: align-content도 space-between을 쓰면 왼, 오 끝으로 움직인다 (줄, 즉 수평축을 기준으로 양 끝으로 움직이기 때문에
수직축으로 양 왼,오로 움직인다)
=> 즉 오뎅꼬치를 기준으로 생각하기! (왼, 오, 위, 아래 헷갈릴 때!)
<오뎅꼬치 보러가기>
https://studiomeal.com/archives/197
이번에야말로 CSS Flex를 익혀보자
이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자 벌써부터 스크롤의 압박이 느껴지고,‘좀 편안하게 누
studiomeal.com