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;

}