마진상쇄
- 마진과 마진이 만날 때 마진 값이 큰 쪽으로 겹쳐짐
상하 마진은 겹치면 collapsing 일어남. 마진과 마진이 맞물리면 큰 쪽만 들어감. 마진 합침, 수직으로만 작용! 좌우는 상관없음- 자식요소만 시각적인 요소를 가지고 있을 때 마진 상쇄됨
- 인라인요소는 상하마진 안 들어가~
플렉스 박스 레이아웃 (display : flex)
아이템요소 갖고 있는 컨테이너에서
display : flex
하면 안에 있는 요소들은 자동으로 수평 정렬됨
정렬된 축이 메인축, 교차되는 축이 교차축(cross)
flex direction 속성 이용하면 메인 축 설정할 수 있음, 디폴트는 row 방향, 순방향 역방향도 지정 가능
flex-direction: row/row-reverse/column/column-reverse
로 방향/축 바꿀 수 있어
시작점과 끝점 설정 가능
flex wrap 속성으로 줄바꿈 지정 가능 no wrap을 주게 되면 wrapping 안됨
wrap 설정하면 wrapping 되어서 같이 다님
.container2>div{flex: 0 0 100px;}
하면 확대축소 안하기, 아이템 축소 확대 들어가 있지 않을 때 wrapping 유무로 줄바꿈 지정 가능
기본은 알아서 확대축소 해서 맞춰서 들어감(wrap/nowrap/wrap-reverse)
flex-flow로 축약도 가능
- justify-content(주축 기준의 배치방법) : flex – strart/end // center/space-between/space-around
- align-items(교차축 기준의 배치방법) : stretch/flex-strart/flex-end/center/baseline
flex-direction 속성에 따라 주축과 교차축은 바뀔 수 있으므로 가로세로가 아닌 justify-content는 주축 align-content는 교차축이라고 확실히 외우기- align-self 플렉스 항목을 개별적으로 배치할 수 있음 align-self : flex-start, flex-end, stretch, center , baseline, auto(기본값)
- align-content(여러 줄일 때의 배치방법 정하기):
- order : 아이템 순서 바꾸기
- flex-grow 플렉스 항목의 너비를 얼마나 늘일지/기본값0
- flex-shrink 플렉스 항목의 너비를 얼마나 줄일지/기본값1
부모 컨테이너에 설정할 수 있는 속성들
display : flex
flex-direction: row. row-reverse,column, column-reverse
flex-wrap: wrap nowrap wrap-reverse
flex-flow: flex-direction,flex-wrap값
justify-content : flex-start/ flex-end/center/space-between/space argound
align-items: flex-start/flex-end/center/stretch/baseline
align-content(여러 줄일 때): flex-start/flex-end/center/stretch. space-between, space-around
자식item에 설정할 수 있는 속성들
order: 순서 정수로
flex-grow : 기본 값이 0
flex-shrink : 기본값이 1
flex-basis : 기본값이 auto
flex : grow shrink basis;
(flex: 1 1 50px) 단위 붙으면 basis값 됨flex : 1 <<grow 값만 설정한 것 = 1 1 0 이 된다~~
flex : 1 50px = 1 1 50px 가 된다~
flex : 1 2; = 1 2 0; 가 된다
flex : none = 0 0 auto 가 된다~
flex : initial = 0 1 auto 가 된다~ (초기값)
flex : auto = 0 0 auto 가 된다~
