CSS justify-content 속성을 사용하는 방법
- 青灯夜游원래의
- 2019-05-28 16:22:417247검색
css justify-content는 주축(가로축) 방향으로 유연한 상자 요소의 정렬을 설정하거나 검색하는 데 사용됩니다. 정렬 방법은 컨테이너 시작 부분, 컨테이너 끝 부분, 용기 중앙에 고르게 분포되어 있습니다.
CSS justify-content 속성을 사용하는 방법은 무엇입니까?
justify-content는 주축(가로축) 방향으로 유연한 상자 요소의 정렬을 설정하거나 검색하는 데 사용됩니다. 교차축의 항목은 align-content 속성을 사용하여 수직으로 정렬할 수 있습니다.
구문:
justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;
속성 값:
● flex-start :기본값. 항목이 컨테이너의 시작 부분에 있습니다.
● flex-end: 항목이 컨테이너 끝에 위치합니다.
● center: 아이템이 용기 중앙에 위치합니다.
● 공백 사이: 항목은 행 사이에 빈 공간이 있는 컨테이너에 위치합니다. 즉, 첫 번째 줄에 균등하게 분포됩니다. 항목은 시작 행에 있고 마지막 항목은 끝 행에 있습니다.
● 공백 주위: 항목이 각 행 앞, 사이, 뒤에 공백이 있는 컨테이너에 위치합니다.
● 초기: 이 속성을 기본값으로 설정합니다.
● 상속: 상위 요소에서 이 특성을 상속합니다.
css justify-content 속성 예
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
}
.flex-start {
justify-content: flex-start;
}
.flex-end {
justify-content: flex-end;
}
.flex-end li {
background: gold;
}
.center {
justify-content: center;
}
.center li {
background: deepskyblue;
}
.space-between {
justify-content: space-between;
}
.space-between li {
background: lightgreen;
}
.space-around {
justify-content: space-around;
}
.space-around li {
background: hotpink;
}
.space-evenly {
justify-content: space-evenly;
}
.space-evenly li {
background: #bada55;
}
.flex-item {
background: tomato;
padding: 5px;
width: 60px;
height: 50px;
margin: 5px;
line-height: 50px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
}
</style>
</head>
<body>
<ul class="flex-container flex-start">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
</ul>
<ul class="flex-container flex-end">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
</ul>
<ul class="flex-container center">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
</ul>
<ul class="flex-container space-between">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
</ul>
<ul class="flex-container space-around">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
</ul>
<ul class="flex-container space-evenly">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
</ul>
</body>
</html>렌더링:
설명:
빨간색 목록은 flex-start로 설정된 justify-content 속성입니다노란색 목록은 justify- flex-endBlue는 centerGreen은 space-between#으로 설정된 justify-content 속성입니다. 🎜🎜#Pink justify-content 속성은 space-around로 설정됨
밝은 녹색은 justify-content 속성이 space-evenly로 설정됨
위 내용은 CSS justify-content 속성을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!