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;
}
댓글 1개
게시글 목록
| 번호 | 제목 |
|---|---|
| 3810 | |
| 3809 | |
| 3808 |
CSS
CSS 애니메이션 고급 활용
|
| 3806 | |
| 3805 | |
| 3804 | |
| 3799 |
CSS
웹폰트 로딩 최적화
3
|
| 3798 | |
| 3796 | |
| 3795 | |
| 3794 | |
| 3790 | |
| 3784 | |
| 3779 | |
| 3776 | |
| 3775 | |
| 3774 | |
| 3767 | |
| 3765 | |
| 3761 | |
| 3752 |
HTML
input의 팁
|
| 3748 | |
| 3734 | |
| 3730 | |
| 3723 | |
| 3719 | |
| 3706 | |
| 3686 | |
| 3656 | |
| 3655 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기