align-items 속성
align-items 속성
이 align-items속성은 항목이 교차 축에서 사용 가능한 모든 공간을 사용하지 않을 때 플렉시블 컨테이너의 항목을 세로로 정렬합니다.
가능한 값은 다음과 같습니다.
stretch- 기본값. 컨테이너에 맞게 항목이 늘어납니다.
flex-start - 항목이 컨테이너 상단에 배치됩니다.
flex-end - 항목은 컨테이너 하단에 위치합니다.
center - 항목이 컨테이너의 가운데에 위치합니다 (세로로).
baseline - 항목이 컨테이너의 기준선에 배치됩니다.
다음 예제에서는 stretch값 을 사용한 결과를 보여줍니다 (기본값).
예
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: stretch;
align-items: stretch;
width: 400px;
height: 250px;
background-color: lightgrey;
}
다음 예제에서는 flex-start값 을 사용한 결과를 보여줍니다 .
예
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: flex-start;
align-items: flex-start;
width: 400px;
height: 250px;
background-color: lightgrey;
}
다음 예제에서는 flex-end값 을 사용한 결과를 보여줍니다 .
예
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: flex-end;
align-items: flex-end;
width: 400px;
height: 250px;
background-color: lightgrey;
}
다음 예제에서는 center값 을 사용한 결과를 보여줍니다 .
예
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
width: 400px;
height: 250px;
background-color: lightgrey;
}
다음 예제에서는 baseline값 을 사용한 결과를 보여줍니다 .
예
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: baseline;
align-items: baseline;
width: 400px;
height: 250px;
background-color: lightgrey;
}