css-flexbox/연습

float: left center right 텍스트와 이미지 배치 용도

 

container :

display:flex flexbox로 만들기

flex-direction:row/row-reverse/column/column-reverse  정렬방향/중심축 결정

flex-wrap:nowrap/wrap/wrap-reverse 아이템이 한 줄에 가득차면 아이템이 자동으로 줄 변경하거나 안하도록 함

flex-flow: cloumn nowrap

justify-content:flex-start/flex-end/center/space-around/space-evenly/space-between중심축에서 아이템을 어떻게 배치할 것인지

align-items:center/baseline반대축에서 아이템 정렬 baseline-텍스트가 균등하게 보이도록 배치

align-content:반대축에 아이템 배치

 

item:

order:0/1/2 아이템 순서

flex-grow: 1 컨테이너 크기 커질 때 아이템 크기 변경/ 비율 결정

flex-shrink:컨테이너가 작아질 때 아이템 크기 변경/ 비율 결정

flex-basis:auto/30%아이템이 공간을 얼마나 차지해야할지 상세히 결정

flex

align-self:center 아이템별로 아이템 정렬

 

중심축과 반대축이 있다.

main axis

cross axis

 

100%:부모의 높이를 채우겠다

100vh:부모에 상관없이 다 쓰는 것

 

https://flexboxfroggy.com/#ko : 연습