📌 flex container, flex item의 기본값
⚠️ 유의점 & 속성 정리
- flex item들이 여러 개의 행(열)으로 이루어져 있을 때, flex container의 높이(너비)가 두 행의 높이(너비) 합보다 더 크다면 기본적으로 교차축 방향에서 일정한 간격을 두고 배치된다.
- 디폴트로
flex-wrap: nowrap이 설정되어 있기 때문에, flex-item에width등 크기가 지정되어 있어도 flex container의 너비에 맞춰 flex-item들이 겹친다.
✅ align-content, align-items, align-self
align-content는flex-wrap: wrap이 설정된 상태에서 아이템들의 행이 두 줄 이상일 때 수직축 방향 정렬을 결정하는 속성이다. 즉align-content는flex-wrap: wrap인 상태에서만 의미가 있다.- 아이템들의 행이 두 줄 이상일 때,
align-content: center를 적용하는 것과align-items: center를 적용하는 것에는 차이가 있다. flex item들이 여러 줄에 배치된 상태일 때,align-content: center를 하게 되면 flex item들 간의 교차축 방향 간격이 사라지고 딱 붙게 된다. 그런데align-items: center를 적용하게 되면 두 행의 위아래 간격은 유지된 상태에서 전체 요소들의 교차축 상의 위치가 가운데로 정렬된다. - flex item들의 속성인
align-self는 기본값이auto이고, 이 때에는 기본적으로 부모(flex-container)의align-items를 따른다.align-items의 기본값은stretch이므로 모든 flex item들은 교차축 방향으로 늘어난다. 만약 여러 flex-item들 중 하나에만 다른 속성을 지정하고 싶다면, 해당 flex-item에align-self를 지정하면 된다.
✅ justify-content: space-around와 space-evenly의 차이
justify-content: space-around와justify-content: space-evenly의 차이를 사진으로 표현하면 다음과 같다.
space-around는 flex item의 주변에 동일한 간격을 주는 것이고,space-evenly는 flex container에 동일한 간격을 주는 것이라고 보면 될 것 같다.
✅ space-between
space-between의 경우 서로 인접한 항목들 사이의 간격은 모두 동일하며,
첫 번째 항목은 주 축의 시작 지점에, 마지막 항목은 끝 지점에 바짝 붙는다.
출처
넓이보다 깊이있게