[flex-box] order

๐Ÿ“„ order

ํ”Œ๋ ‰์Šค ์•„์ดํ…œ์˜ ๋ฐฐ์น˜ ์ˆœ์„œ๋ฅผ ๊ฒฐ์ •ํ•ฉ๋‹ˆ๋‹ค.
์ง€์ •ํ•œ ์ˆซ์ž(์ •์ˆ˜)์— ๋งž์ถฐ ์˜ค๋ฆ„์ฐจ์ˆœ์œผ๋กœ ๋ฐฐ์น˜ํ•ฉ๋‹ˆ๋‹ค.
์ฝ”๋“œ์— ์˜ํ–ฅ์„ ๋ผ์น˜๋Š” ๊ฒƒ์ด ์•„๋‹Œ, ๋ณด์—ฌ์ง€๋Š” ์ˆœ์„œ์—๋งŒ ์˜ํ–ฅ์„ ์ค๋‹ˆ๋‹ค.

li:nth-child(1) {
  order: 5;
}
li:nth-child(2) {
  order: -4;
}
li:nth-child(3) {
  order: 3;
}
li:nth-child(4) {
  order: -2;
}
li:nth-child(5) {
  order: 1;
}

์ถœ์ฒ˜

  • ์œ ๋…ธ์ฝ”๋”ฉ

Tags:

Categories:

Updated:

Leave a comment