CSS Flexbox
박스와 아이템을 자유자재로 움직일 수 있는것 박스가 커지면 각각 아이템들이 어떻게 공간을 매꿔야 할까?
- Flexbox는 박스에 적용되는 속성값이 존재하고, 각각의 아이템에 적용되는 속성값이 존재한다.
- 아이템에 지정되는 속성값들
Flexbox는 중심축과 반대축이있다.
div.container>div.item.item{}*10
100% 아이템에 맞게 높이가 지정되어있고, 컨테이너가 들어있는 부모의 높이에 100퍼센트 채우겠다 컨테이너의 100퍼센트> 바디의 100퍼센트
부모의 80퍼센트만 쓰겠다
80vh
colortool: 색깔
flex-wrap: 아무리 작아져도 한줄에 붙어있음
flex-wrap:nowrap
flex-wrap:wrap 자동으로 다음줄로 넘어간다
이 두가지 아이들을 합한게: flex-flow:column wrap
border:1px solid black
display:flex;
flex-direction:row;
flex-wrap:nowrap:
플렉스로 할거고, 전체적인 방향은 행(중심축), 한줄에 가득차면 넘어가게 할건지
justify-content:flex-start;
아이템의 순서는 유지하되 배치하는것
justify-content:space-evenly;
justify-content:space-between;
아이템을 중심축에서 어떻게 배치하는지 결정
justify-content:중심축에서 아이템 배치
align-items: 반대축에서 아이템을 어떻게 배치
item속성값들
flex-shrink:2; 줄어들고 늘어가는것
flex-grow
