- 기본 정렬
- 순서 바꾸기
flex-direction: ;
order: ;
-
flex-direction : 정렬하기
- row, row-reverse, column, column-revers
- 순서 뒤바꾸는 작업은 잘 하지 않음
- 주로 row 사용함 -
order : 배치되는 순서 정하기
- order값이 지정되지 않으면 작은 값(0) 바로 뒤로 이동
- z-index와 개념은 다르지만 원하는대로 순서를 바꿀 수 있음
-
flex-direction: row; (기본값)
- 가로 정렬
.container{width: 600px; height: 100px; border: 2px solid #07c;
display: flex;
flex-direction: row;
}
.item1{ width: 200px; background-color: aqua; /*box1*/
order:1;
}
.item2{ width: 200px; background-color: darkgoldenrod; /*box2*/
order:2;
}
.item3{ width: 200px; background-color: darkkhaki; /*box3*/
}▲order값이 지정되지 않으면 작은 값(0) 바로 뒤로 이동
-
flex-direction: column;
-세로 정렬 -
flex-direction: column-reverse;
-세로 정렬 역순 -
flex-direction: row-reverse;
-가로 정렬 역순
더보기
<style>
.container{ width: 900px; height: 100px; border :2px solid #07c;
display:flex;
/* 1) flex-derection : 정렬하기 */
flex-direction:row;
/*column: 위->아래 */
/*column: 아래->위 */
/*row: 왼쪽 -> 오른쪽*/
/*row->reverse: 오른쪽 -> 왼쪽*/
/*>>순서 뒤바꾸는 작업은 잘 안함, row 많이 씀, 값이 어떻게 바뀌는 것인지 확인 하는 정도*/
}
/* 2) order: 배치되는 순서 바꾸기 */
/* order: 가장 큰값(0)이 뒤로 이동,
order값이 지정되지 않으면 작은 값 바로 뒤로 이동 */
/* z인덱션과 개념은 다르지만 임의로 순서를 바꿀 수 있음*/
.item1{ width: 300px; background-color: darkkhaki;
order:1 ;
}
.item2{ width: 300px; background-color: aqua;
order:2 ;
}
.item3{ width: 300px; background-color: aquamarine }
</style>
</head>
<body>
<div class="container">
<div class="item1">box1</div>
<div class="item2">box2</div>
<div class="item3">box3</div>
</div>
</body>
