CSS align-content 속성을 사용하는 방법에 대한 자세한 그래픽 설명

대부분의 프런트 엔드 작업자는 일반적으로 사용되는 일부 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!