대부분의 프런트 엔드 작업자는 일반적으로 사용되는 일부 CSS 속성에 익숙할 것이므로 오늘은 약간 흔하지 않은 CSS 속성에 대해 이야기하겠습니다. CSS align-content 속성을 사용하는 방법을 알고 계십니까? align-content의 속성 값은 무엇입니까? 궁금하신 분들은 아래 내용을 계속 읽어주세요.
1. CSS align-content 속성의 정의 및 사용법
정의: align-content 속성은 유연한 컨테이너의 항목이 사용 가능한 공간을 모두 차지하지 않을 때 유연한 컨테이너의 항목을 수직으로 정렬합니다. 교차축.
기능: 무료 상자 안에 있는 각 항목의 수직 배열을 설정합니다.
조건: 상위 요소에 display:flex 속성을 설정해야 하며, 이 속성의 설정이 적용되도록 줄 바꿈, flex-wrap:wrap을 설정해야 합니다.
설정: 이 속성은 컨테이너의 항목에 영향을 미치므로 상위 요소에 설정하면 됩니다.
사용 시 align-content 값을 필요에 따라 설정할 수 있습니다.
stretch: 용기에 맞게 늘어납니다(기본값).
center: 컨테이너 중앙에 위치합니다.
flex-start: 컨테이너의 시작 부분에 위치합니다.
flex-end: 컨테이너 끝에 위치합니다.
space-between: 줄 사이에 공백이 있는 컨테이너 내에 위치합니다.
space-around: 각 줄 앞, 사이, 뒤에 공백이 있는 컨테이너에 위치합니다.
작성: align-content: Stretch|center|flex-start|flex-end|space-between|space-around
2. Align-content 인스턴스 분석
설명: div 외부에 4개의 작은 div가 있습니다. 효과를 확실히 보려면 다른 색상을 설정한 다음 큰 div 안에 align-content:center;
를 추가하여 내부의 div가 컨테이너의 세로 방향 중앙에 위치할 수 있도록 하세요. 코드는 다음과 같습니다.
HTML 부분:
<div class="box"> <div style="background-color:red;"></div> <div style="background-color:orange;"></div> <div style="background-color:yellow;"></div> <div style="background-color:green;"></div> </div>
CSS 부분:
.box { width: 100px; height: 300px; border: 1px solid #c3c3c3; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-content: center; align-content: center; } .box div { width: 100px; height: 50px; }
Rendering:
요약: align-content: center를 상위 항목으로 설정한 후 그림 효과가 한눈에 보입니다. 요소 안에 있는 요소는 수직으로 중앙에 배치되어 있습니다. 다른 효과에 대해서는 여기서 하나씩 설명하지 않겠습니다. 특히 초보자는 더 연습해 보시기 바랍니다. .
위 내용은 CSS align-content 속성을 사용하는 방법에 대한 자세한 그래픽 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!