CSS의 align-content 사용법에 대한 자세한 설명-CSS 튜토리얼-php.cn

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

巴扎黑

풀어 주다： 2017-06-28 14:23:50

원래의

1755명이 탐색했습니다.

align-content

기능:

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

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

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

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

<!DOCTYPE=html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<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>
</head>
<body>

<p id="father">

<p class="son1">
q
</p>

<p class="son2">
w
</p>

<p class="son3">
e
</p>
<p class="son3">
e
</p>
<p class="son3">
e
</p>



</p>

</body>
</html>

로그인 후 복사

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

<!DOCTYPE=html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<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>
</head>
<body>

<p id="father">

<p class="son1">
q
</p>

<p class="son2">
w
</p>

<p class="son3">
e
</p>
<p class="son4">
e
</p>
<p class="son5">
e
</p>



</p>

</body>
</html>

로그인 후 복사

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

<!DOCTYPE=html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<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>
</head>
<body>

<p id="father">

<p class="son1">
q
</p>

<p class="son2">
w
</p>

<p class="son3">
e
</p>
<p class="son4">
e
</p>
<p class="son5">
e
</p>



</p>

</body>
</html>

로그인 후 복사