CSS, HTML
CSS flexible 레이아웃: flex item의 정렬과 간격.
yuni02
2021. 7. 7. 16:51
- 진행 축과 교차 축: 진행 축은 flex item이 배치되는 축을 의미하며, 교차 축은 진행 축에 90도로 교차하는 축을 말합니다. 이 축들은 flex-direction의 값( row, column)에 따라 달라집니다.
- 한 줄 vs 여러 줄: flex-basis 값과 flex-wrap 속성에 의해 단일 행 또는 여러 행이 될 수 있습니다. 여러 줄은 빈 공간이 부족할 때 발생합니다.
- justify-content: 진행 축의 정렬과 아이템 간 간격을 조절합니다. flex-direction에 따라 x축 또는 y축 정렬을 담당합니다.
- align-items: 교차 축의 정렬을 조절합니다. flex-direction에 따라 x축 또는 y축 정렬을 담당합니다.
- align-self: 개별 flex item의 독립적인 교차 축 정렬을 조절합니다. align-items보다 우선 순위가 높습니다.
- align-content: 여러 줄의 교차 축 정렬과 간격을 조절합니다. 여러 줄이 있을 때만 적용되며 align-items보다 우선순위가 높습니다.
참고
자세한 내용은 아래의 블로그에서 확인 가능