플렉스 방향
플렉스 방향
flex-direction속성 플렉스 콘테이너 내의가요 항목의 방향을 지정한다. 기본값은 flex-direction입니다 row(왼쪽에서 오른쪽, 위에서 아래).
다른 값은 다음과 같습니다.
1. row-reverse - 쓰기 모드 (방향)가 왼쪽에서 오른쪽 인 경우 플렉스 항목이 오른쪽에서 왼쪽으로 배치됩니다
2. column - 쓰기 시스템이 가로 인 경우 플렉스 항목이 세로로 배치됩니다.
3. column-reverse - 열과 같지만 반대입니다.
다음 예제에서는 row-reverse값 을 사용한 결과를 보여줍니다 .
예
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
width: 400px;
height: 250px;
background-color: lightgrey;
}
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
width: 400px;
height: 250px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div>
</body>
</html>
게시글 목록
| 번호 | 제목 |
|---|---|
| 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 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기