유연한 레이아웃을 위해 CSS3를 사용할 때 콘텐츠 정렬 방법에 대한 자세한 설명

이 글에서는 CSS3 탄력적 레이아웃 콘텐츠 정렬(justify-content) 속성의 사용에 대한 자세한 설명을 주로 소개합니다. 관심 있는 사람은 이에 대해 알아볼 수 있습니다.

콘텐츠 정렬(justify-content)을 적용하세요. ) 탄력적 컨테이너에 대한 속성입니다. Flex 항목은 Flex 컨테이너의 기본 축을 따라 정렬됩니다.

탄성 길이와 자동 마진이 결정된 후에 이 작업이 수행됩니다. 존재하는 경우 남은 공간을 할당하는 데 사용되며, 콘텐츠가 오버플로될 경우 항목 정렬에도 영향을 줍니다.

참고: 플렉시블 레이아웃에는 주축과 교차축이라는 두 가지 기본 용어가 있습니다. 일반적으로 화면의 행 방향과 열 방향이라고 생각하면 됩니다(그러나 엄밀히 말하면 쓰기 모드와 동일합니다). 탄성 흐름 방향에 따라 다름).

그러면 메인 시작과 메인 엔드는 각각 탄성 컨테이너의 왼쪽과 오른쪽으로 간주될 수 있습니다.

justify-content 구문은 다음과 같습니다.

justify-content: flex-start | flex-end | center | space-between | space-around

매개변수 설명은 다음과 같습니다.

flex-start

flex 항목은 헤드 옆에 채워집니다. 라인의. 이것이 기본값입니다. 첫 번째 Flex 항목의 기본 시작 여백 가장자리는 행의 기본 시작 가장자리에 배치되고 후속 Flex 항목은 순서대로 동일하게 배치됩니다.

flex-end

Flex 항목은 행 끝 부분에 즉시 채워집니다. 첫 번째 Flex 항목의 기본 끝 여백 가장자리는 행의 기본 끝 가장자리에 배치되고 후속 Flex 항목은 순서대로 같은 높이로 배치됩니다.

center

Flex 항목은 패딩 옆 중앙에 배치됩니다. (남은 여유 공간이 음수이면 플렉스 항목이 양방향으로 오버플로됩니다.)

space-between

flex 항목은 행에 고르게 분포됩니다. 남은 공간이 음수이거나 Flex 항목이 하나만 있는 경우 이 값은 flex-start와 동일합니다. 그렇지 않은 경우 첫 번째 Flex 항목의 여백은 행의 기본 시작 가장자리에 정렬되고 마지막 Flex 항목의 여백은 행의 기본 끝 가장자리에 정렬된 다음 나머지 Flex 항목이 분산됩니다. 행은 서로 인접해 있습니다.

space-around

Flex 항목은 행에서 균등한 간격으로 배치되어 양쪽에 절반의 공간을 남깁니다. 남은 공간이 음수이거나 Flex 항목이 하나만 있는 경우 이 값은 center와 동일합니다. 그렇지 않은 경우 Flex 항목은 서로 동일한 간격(예: 20px)으로 행을 따라 배포되고 첫 번째 측면과 마지막 측면과 Flex 컨테이너 사이에 절반의 공간을 남겨 둡니다(1/2*20px=10px).

Justify-content 속성 값 효과 예시

위 그림은 위 5가지 값의 효과와 차이점을 직관적으로 보여줍니다.

위 내용은 유연한 레이아웃을 위해 CSS3를 사용할 때 콘텐츠 정렬 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!