align-items 속성 > 퍼블리셔팁

퍼블리셔팁

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

align-items 속성 정보

CSS 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;

}

추천
0

댓글 0개

전체 1,263
퍼블리셔팁 내용 검색

회원로그인

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