align-content 속성 정보
CSS align-content 속성본문
align-content 속성
align-content속성 은 속성의 동작을 수정합니다 flex-wrap. align-items플렉스 아이템을 정렬하는 대신 비슷 하지만 플렉스 라인을 정렬합니다.
가능한 값은 다음과 같습니다.
stretch- 기본값. 줄이 늘어나 나머지 공간을 차지합니다.
flex-start - 선은 플렉스 컨테이너의 시작 부분을 향해 포장됩니다.
flex-end - 선은 플렉스 컨테이너의 끝으로 포장됩니다.
center - 선은 플렉스 컨테이너의 중심을 향해 포장됩니다.
space-between - 선은 플렉스 컨테이너에 고르게 분포됩니다.
space-around - 선은 플렉스 컨테이너에 고르게 분포되어 있으며 양쪽 끝에 절반 크기의 공백이 있습니다.
다음 예제에서는 center값 을 사용한 결과를 보여줍니다 .
예
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-content: center;
align-content: center;
width: 300px;
height: 300px;
background-color: lightgrey;
}
추천
0
0
댓글 0개