마진 상쇄 (margin collapsing)
상 하 마진이 겹치는 경우, 큰 쪽 하나만 나타남
형제관계에서의 마진 상쇄
인접 형제 박스 간 상하 마진이 겹칠 때
부모 자식관계에서의 마진 상쇄
자식요소만 시각적인 요소 가지고있고 부모 요소에 시각적 요소 없을 때, 자식 요소의 마진과 맞물림 => 마진 상쇄 일어남
자기 자신
위 아래에 마진을 줬을 때, 시각적 요소 없이 마진끼리 맞물리면 top bottom 중에서 더 큰 값 하나만 적용됨.
+인라인 요소는 상하마진 적용 안됨.
+좌우 마진은 상쇄 안됨
부모 컨테이너에 설정 할 수 있는 속성들
display: flex / inline-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-around; align-items: flex-start flex-end center stretch baseline; align-content: flex-start flex-end center stretch space-between space-around;
flex-direction
주축 설정
flex-direction row: 내용이 가로축에서 순방향으로 정렬
flex-direction row-reverse: 내용이 가로축에서 역방향으로 정렬
flex-direction column: 내용이 세로축에서 순방향으로 정렬
flex-direction column-reverse: 내용이 세로축에서 역방향으로 정렬
flex-wrap
아이템 총 너비나 높이가 컨테이너보다 클 때, 공간이 모자르거나 넘치면 크기 자동으로 조절.
팽창 (grow)
축소 (shrink)
wrap : 줄바꿈 설정
아이템의 크기를 변하지 않게 설정하는 법
flex-wrap nowrap : 플렉스를 한 줄에 표시. 밖으로 삐져나감
flex-wrap wrap : 플렉스를 여러 줄에 표시 공간 안에서 빠져나가지 않고 밑으로 떨어짐. 아이템의 너비가 자동조절되지 않음.
flex-wrap wrap-reverse : 플렉스 항목을 여러 줄에 표시하되 반대 방향으로 배치
flex-flow
축약속성
justify-content
주축 방향으로 정렬
flex-start : 주 축의 시작점을 기준으로 배치
flex-end : 주 축의 끝점을 기준으로 배치
row-reverse 랑 다른점 : row-reverse는 주 축이 바뀌는 것이므로 아이템이 역순임. flex-end는 반대쪽에 정렬해도 아이템들의 순서가 역순이 아님.
ceter : 주축의 중앙을 기준으로 배치
space-between : 맨 왼쪽 오른쪽 콘텐츠를 끝에 붙인 뒤 간격을 동일하게 설정
space-around : 모든 간격을 동일하게 적용함. (형제요소 사이는 간격이 두번 적용되므로 맨 끝의 간격보다 넓어보임)
align-items
교차축 방향으로 정렬
stretch 플렉스 항목을 확장에 교차축을 꽉 채움
flex-start 교차축의 시작점을 기준으로 배치
flex-end 축의 끝점을 기준으로 배치
center 교차축의 중앙을 기준으로 배치
baseline 글자 크기가 가장 큰 아이템의 baseline에 맞춤.
자식 item에 설정할 수 있는 속성들
flex
order
.wrap1>div:nth-child(1){order: 1;} .wrap1>div:nth-child(2){order: 0;} .wrap1>div:nth-child(3){order: 2;} .wrap1>div:nth-child(4){order: 3;} .wrap1>div:nth-child(5){order: 4;}
아이템의 순서를 바꿔줌
아이템에 직접 적용
align content
