CSS 정렬 콘텐츠 속성을 사용하는 방법-CSS 튜토리얼-php.cn

CSS 정렬 콘텐츠 속성을 사용하는 방법

青灯夜游

풀어 주다： 2019-05-25 11:28:43

원래의

4065명이 탐색했습니다.

align-content 속성은 프리박스 내 항목의 수직 배열을 설정하는 데 사용됩니다.

CSS 정렬 콘텐츠 속성을 사용하는 방법

CSS align-content 속성

기능: align-content 속성은 프리 박스 내 항목의 수직 배열을 설정하는 데 사용되며 flex-wrap 속성의 동작을 수정합니다.

사용 조건:

상위 요소에 free box 속성을 display:flex로 설정하고, 정렬 모드를 가로 정렬로 설정한 다음 줄 바꿈, flex-wrap:wrap; ; 이 속성이 설정되면 작동합니다.

설명: align-content 속성은 컨테이너 내부의 항목에 대해 작동하며 효과를 렌더링하려면 컨테이너에 여러 행의 항목이 있어야 함을 설정합니다.

구문: 

align-content: stretch|center|flex-start|flex-end|space-between|space-around;

로그인 후 복사

값 설명:

stretch: 기본값, 요소는 컨테이너에 맞게 늘어납니다. 그러면 컨테이너의 각 항목이 차지하는 공간이 늘어나고 채우기 방법은 채우는 것입니다. 각 항목 아래에 공백을 추가합니다.

center: 항목 사이의 공간을 취소하고 요소가 컨테이너 중앙에 오도록 모든 항목을 세로 중앙에 배치합니다.

flex-start: 항목 사이의 공간을 제거하고 요소가 컨테이너의 시작 부분에 오도록 항목을 컨테이너 위에 배치합니다.

flex-end: 항목 사이의 공간을 제거하고 요소가 컨테이너 끝에 오도록 항목을 컨테이너 하단에 배치합니다.

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

space-around: 각 항목 위와 아래에 동일한 길이의 공간을 두어 항목 사이의 공간이 단일 항목 공간의 두 배가 되도록 합니다.

CSS align-content 속성 사용 예

<!DOCTYPE html>
<html>
<head>
<style> 
#main1,#main2,#main3,#main4,#main5,#main6{
width: 70px;
  height: 250px;
  border: 1px solid #c3c3c3;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  
  margin:10px;
  float:left;
}
div *{
  width: 70px;
  height: 70px;
}
#main1 {
  -webkit-align-content: stretch;
  align-content: stretch;
}
#main2 {
  -webkit-align-content: center;
  align-content: center;
}
#main3 {
  -webkit-align-content: flex-start;
  align-content: flex-start;
}
#main4 {
  -webkit-align-content: flex-end;
  align-content: flex-end;
}
#main5 {
  -webkit-align-content: space-between;
  align-content: space-between;
}
#main6 {
  -webkit-align-content: space-around;
  align-content: space-around;
}
</style>
</head>
<body>
<h1>align-content属性</h1>
<div id="main1">
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;"></div>
  <div style="background-color:pink;"></div>
</div>
<div id="main2">
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;"></div>
  <div style="background-color:pink;"></div>
</div>
<div id="main3">
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;"></div>
  <div style="background-color:pink;"></div>
</div>
<div id="main4">
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;"></div>
  <div style="background-color:pink;"></div>
</div>
<div id="main5">
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;"></div>
  <div style="background-color:pink;"></div>
</div>
<div id="main6">
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;"></div>
  <div style="background-color:pink;"></div>
</div>
</body>
</html>

로그인 후 복사

렌더링:

CSS 정렬 콘텐츠 속성을 사용하는 방법