align-content 속성 > 퍼블리셔팁

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

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개

전체 270
퍼블리셔팁 내용 검색 CSS에서

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT