1. Flex.item order
-
flex에서 아이템을 배치할 때 배치 순서를 정하는 속성 -
order의 기본 값은 0입니다. -
HTML코드를 수정하지 않아도 된다는 편의성이 있다.
<body>
<section id="container">
<div style="background-color: #80ffdb">1</div>
<div style="background-color: #64dfdf">2</div>
<div style="background-color: #48bfe3">3</div>
<div style="background-color: #5390d9">4</div>
<div style="background-color: #6930c3">5</div>
</section>
</body>body {
font-family: 'Open Sans', sans-serif;
}
#container {
background-color: #003049;
width: 90%;
/* height: 250px; */
margin: 0 auto;
border: 5px solid #003049;
display: flex;
flex-direction: row;
justify-content: center;
}
#container>div {
width: 200px;
height: 150px;
font-size: 2em;
}
1.1 Order 사용
#container>div:nth-of-type(5) {
order: -1;
/* 5번 아이템의 order 값을 -1로 변경해서, 기존 아이템 보다 맨 앞에 배치 */
}
1.1.1 순서 재배치
#container>div:nth-of-type(1) {
order: 1;
/* 2 */
}
#container>div:nth-of-type(2) {
order: 3;
/* 4 */
}
#container>div:nth-of-type(3) {
order: 2;
/* 3 */
}
#container>div:nth-of-type(4) {
order: 3;
/* 4, 아이템2번과 오더값은 동일하다. */
}
#container>div:nth-of-type(5) {
order: -1;
/* 1 */
}
프론트엔드 개발자가 되기 위한 학습 과정을 정리하는 블로그