웹_240125수업

https://flexboxfroggy.com/#ko

Flexbox Froggy

 

 

[flex-direction] -> flex-item 방향정렬

row - 가로 한줄에 같이 배치 : 기본값

justify-content:; -> 가로 작동

align-items;: -> 세로작동

flex-grow -> 가로에서 작동

 

column - 세로 한줄에 하나씩 배치

justify-content:; -> 세로 작동

align-items;: -> 가로 작동

flex-grow -> 세로에서 작동(높이)

 

-> reverse를 사용하게 되면 start와 end방향이 바뀐다.

 

ex) 

- row

justify-content: flex-start; -> 좌측정렬

row-reverse

justify-content: flex-start; -> 우측정렬

 

align-self: flex-end;

 

 

https://codepen.io/leenyooo/pen/Babwmvj?editors=1100

justfy-content: space-"";