CSS의 align-content 사용법에 대한 자세한 설명

align-content

기능:

무료 상자 내 각 항목의 세로 배열을 설정합니다.

조건:
상위 요소에 free box 속성 display:flex를 설정하고 정렬 모드를 가로 정렬 flex-direction:row로 설정하고 줄 바꿈, flex-wrap을 설정해야 합니다. :wrap; 이와 같이 이 속성의 설정이 적용됩니다.
설정 개체:

이 속성은 컨테이너 내부의 항목에 작동하며 상위 요소를 설정합니다.

값:
stretch: 기본 설정은 컨테이너의 각 항목이 차지하는 공간을 늘리며, 채우는 방법은 각 항목 아래에 공백을 추가하는 것입니다. 첫 번째 항목은 기본적으로 컨테이너 상단부터 정렬됩니다.

html>


<meta>
<title>
Align-content
</title>
<style>

#father{
    
    width:200px;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    align-content:strech;
    height:200px;
    background-color:grey;
}.son1{
    
      height:30px;
    width:100px;
    background-color:orange;
}.son2{
    
    height:30px;
    width:100px;
    background-color:red;
}.son3{
    
      height:30px;
    width:100px;
    background-color:#08a9b5;
}</style>



<p>

</p><p>
q
</p>

<p>
w
</p>

<p>
e
</p>
<p>
e
</p>
<p>
e
</p>

Center: 항목 사이의 공간을 제거하고 모든 항목을 수직으로 중앙에 배치합니다.

html>


<meta>
<title>
关于文档元素测试
</title>
<style>

#father{
    
    width:200px;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    align-content:center;
    height:200px;
    background-color:grey;
}.son1{
    
      height:30px;
    width:100px;
    background-color:orange;
}.son2{
    
    height:30px;
    width:100px;
    background-color:red;
}.son3{
    
      height:30px;
    width:100px;
    background-color:#08a9b5;
}.son4{
    
      height:30px;
    width:100px;
    background-color:#9ad1c3;
}.son5{
    
      height:30px;
    width:100px;
    background-color:rgb(21,123,126);
}</style>



<p>

</p><p>
q
</p>

<p>
w
</p>

<p>
e
</p>
<p>
e
</p>
<p>
e
</p>

Flex-start: 항목 사이의 공간을 제거하고 항목을 컨테이너 위에 놓습니다.

html>


<meta>
<title>
关于文档元素测试
</title>
<style>

#father{
    
    width:200px;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    align-content:flex-start;
    height:200px;
    background-color:grey;
}.son1{
    
      height:30px;
    width:100px;
    background-color:orange;
}.son2{
    
    height:30px;
    width:100px;
    background-color:red;
}.son3{
    
      height:30px;
    width:100px;
    background-color:#08a9b5;
}.son4{
    
      height:30px;
    width:100px;
    background-color:#9ad1c3;
}.son5{
    
      height:30px;
    width:100px;
    background-color:rgb(21,123,126);
}</style>



<p>

</p><p>
q
</p>

<p>
w
</p>

<p>
e
</p>
<p>
e
</p>
<p>
e
</p>

flex-end: 항목 사이의 공간을 없애고 항목을 컨테이너 바닥에 배치합니다.

align-content:flex-end;

space-between 이렇게 하면 항목의 양쪽 끝이 수직으로 정렬됩니다. 즉, 위쪽 항목은 컨테이너 위쪽에 정렬되고 아래쪽 항목은 컨테이너 아래쪽에 정렬됩니다. 각 항목 사이에 동일한 간격을 두십시오.

align-content:space-between;

Space-around: 각 항목 위와 아래의 공간 길이를 동일하게 유지하여 항목 사이의 공간을 단일 항목 공간의 두 배로 만듭니다.

align-content:space-around;

Inherit: 요소의 이 속성을 상위 요소에서 상속합니다.
initial: 요소의 이 속성을 기본 초기 값으로 만듭니다.

위 내용은 CSS의 align-content 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!