flex-wrap 프로퍼티 > 퍼블리셔팁

퍼블리셔팁

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

flex-wrap 프로퍼티 정보

CSS flex-wrap 프로퍼티

본문

flex-wrap 프로퍼티


이 flex-wrap속성은 하나의 플렉스 선에 플렉스 항목을 줄 여유가 없는지 여부를 지정합니다.


가능한 값은 다음과 같습니다.


nowrap- 기본값. 유연한 항목은 랩핑되지 않습니다.

wrap - 유연한 항목은 필요한 경우 줄 바꿈합니다.

wrap-reverse - 필요에 따라 유연한 항목을 역순으로 줄 바꿈합니다.

다음 예제에서는 nowrap값 을 사용한 결과를 보여줍니다 (기본값).


.flex-container {

    display: -webkit-flex;

    display: flex;

    -webkit-flex-wrap: nowrap;

    flex-wrap: nowrap;

    width: 300px;

    height: 250px;

    background-color: lightgrey;

}



다음 예제에서는 wrap값 을 사용한 결과를 보여줍니다 .


.flex-container {

    display: -webkit-flex;

    display: flex;

    -webkit-flex-wrap: wrap;

    flex-wrap: wrap;

    width: 300px;

    height: 250px;

    background-color: lightgrey;

}


다음 예제에서는 wrap-reverse값 을 사용한 결과를 보여줍니다 .


.flex-container {

    display: -webkit-flex;

    display: flex;

    -webkit-flex-wrap: wrap-reverse;

    flex-wrap: wrap-reverse;

    width: 300px;

    height: 250px;

    background-color: lightgrey;

}

추천
0
  • 복사

댓글 1개

© SIRSOFT
현재 페이지 제일 처음으로