CSS align-items 속성을 사용하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

CSS align-items 속성을 사용하는 방법은 무엇입니까?

青灯夜游

풀어 주다： 2020-09-08 14:43:12

원래의

24002명이 탐색했습니다.

CSS align-items 속성은 float 컨테이너의 항목을 가로 축 방향으로 정렬하는 데 사용됩니다. 해당 구문은 "align-items: Stretch|center|flex-start|flex-end|baseline;"입니다.

CSS align-items 속성을 사용하는 방법은 무엇입니까?

css align-items 속성은 수평 축 방향으로 float 컨테이너의 항목 정렬을 지정하는 데 사용됩니다. 컨테이너를 채우기 위해 늘이고, 수평 축 중앙에, 상단에 수직으로 정렬하고, 수직으로 정렬합니다. 하단, 수평 축이 기준선에 정렬됩니다. [동영상 튜토리얼 추천: CSS 튜토리얼]

CSS align-items 속성

align-items 속성은 유연한 상자 레이아웃 모듈의 하위 속성입니다.

역할: 현재 행의 가로 축을 따라 플렉스 항목을 정렬하는 방법에 대한 기본(정렬) 동작을 정의합니다.

참고: float 컨테이너 내의 각 하위 항목에 align-self 속성을 사용하여 align-items 속성의 스타일을 재정의할 수 있습니다.

구문: 

align-items: stretch|center|flex-start|flex-end|baseline;

로그인 후 복사

stretch(기본값): 컨테이너를 채울 때까지 늘립니다(여전히 최소 너비/최대 너비 준수).

CSS align-items 속성을 사용하는 방법은 무엇입니까?

center: 항목은 기본적으로 가로 축의 중앙에 배치됩니다. 기본적으로 가로 축은 세로입니다. 즉, Flexbox 항목이 세로 중앙에 배치됩니다.

CSS align-items 속성을 사용하는 방법은 무엇입니까?

flex-start: 항목은 가로 축의 시작 부분에 정렬됩니다. 즉, 항목은 위쪽에 세로로 정렬됩니다.

CSS align-items 속성을 사용하는 방법은 무엇입니까?

flex-end: 항목이 가로 축의 끝에 정렬됩니다. 즉, 항목이 아래쪽에 세로로 정렬됩니다.

CSS align-items 속성을 사용하는 방법은 무엇입니까?

baseline: 항목이 가로 축의 기준선에 정렬됩니다. 즉, Flexbox 항목은 텍스트가 기준선을 따라 수평선을 따라 정렬되도록 스스로 정렬됩니다.

CSS align-items 속성을 사용하는 방법은 무엇입니까?

CSS align-items 속성 사용 예

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<style>
			.flex-container {
				padding: 0;
				margin: 0;
				list-style: none;
				-ms-box-orient: horizontal;
				display: -webkit-box;
				display: -moz-box;
				display: -ms-flexbox;
				display: -moz-flex;
				display: -webkit-flex;
				display: flex;
				float: left;
			}
			
			.flex-start {
				-webkit-align-items: flex-start;
				align-items: flex-start;
			}
			
			.flex-end {
				-webkit-align-items: flex-end;
				align-items: flex-end;
			}
			
			.flex-end li {
				background: gold;
			}
			
			.center {
				-webkit-align-items: center;
				align-items: center;
			}
			
			.center li {
				background: deepskyblue;
			}
			
			.baseline {
				-webkit-align-items: baseline;
				align-items: baseline;
			}
			
			.baseline li {
				background: lightgreen;
			}
			
			.stretch {
				-webkit-align-items: stretch;
				align-items: stretch;
			}
			
			.stretch li {
				background: hotpink;
			}
			
			.flex-item {
				background: tomato;
				padding: 5px;
				width: 50px;
				margin: 5px;
				line-height: 50px;
				color: white;
				font-weight: bold;
				font-size: 2em;
				text-align: center;
			}
		</style>

	</head>

	<body>
		<div class="box">
			<ul class="flex-container flex-start">
				<li class="flex-item">1<br>2</li>
				<li class="flex-item">3</li>
				<li class="flex-item">4<br>5</li>
				<li class="flex-item">6</li>
			</ul>

			<ul class="flex-container flex-end">
				<li class="flex-item">1<br>2</li>
				<li class="flex-item">3</li>
				<li class="flex-item">4<br>5</li>
				<li class="flex-item">6</li>
			</ul>

			<ul class="flex-container center">
				<li class="flex-item">1<br>2</li>
				<li class="flex-item">3</li>
				<li class="flex-item">4<br>5</li>
				<li class="flex-item">6</li>
			</ul>

			<ul class="flex-container baseline">
				<li class="flex-item">1<br>2</li>
				<li class="flex-item">3</li>
				<li class="flex-item">4<br>5</li>
				<li class="flex-item">6</li>
			</ul>

			<ul class="flex-container stretch">
				<li class="flex-item">1<br>2</li>
				<li class="flex-item">3</li>
				<li class="flex-item">4<br>5</li>
				<li class="flex-item">6</li>
			</ul>
		</div>
	</body>

</html>

로그인 후 복사

Rendering:

155021755264408CSS align-items 속성을 사용하는 방법은 무엇입니까?