justify-content: 설명 사이의 공백(CSS)
CSS Flexbox 레이아웃을 시각적으로 구축합니다. flex-direction, justify-content, align-items, flex-wrap 및 컨테이너의 간격과 자식별 flex-grow, flex-shrink 및 flex-basis가 모두 실시간 미리보기와 복사 가능한 CSS로 제공됩니다.
처리 중...
0%
결과
이 페이지에서는 justify-content가 space-between으로 설정된 생성기를 엽니다. 첫 번째 상자는 컨테이너의 시작 가장자리와 같은 높이로 배치되고, 마지막 상자는 끝 가장자리와 같은 높이로 배치되며, 남은 공간은 중앙에 있는 상자 사이의 동일한 간격으로 나누어집니다. 첫 번째 상자 앞이나 마지막 상자 뒤는 없습니다.
그것은 사람들이 혼동하는 세부 사항입니다. space-around는 모든 상자의 양쪽 측면에 동일한 여백을 제공하므로 상자 사이의 간격은 두 외부 가장자리의 간격보다 두 배 넓어집니다(각 가장자리는 두 개가 아닌 상자 하나의 여백만 갖습니다). 공간 균등화는 더 나아가 두 개의 외부 가장자리를 포함하여 모든 간격을 동일한 크기로 만듭니다. 세 개 중 간격이 전체적으로 완벽하게 균일하게 보이는 유일한 가장자리입니다.
아래의 세 가지 값 사이에서 justify-content 드롭다운을 전환하고 동일한 세 개의 상자가 재배열되는 것을 확인하세요. 차이점을 기억하는 대신 확인하는 가장 빠른 방법입니다. 실제로 원하는 간격과 일치하는 CSS를 복사하세요.