---
tags: 軟體工程師體驗營 - 2023
---

# 🏅 切版任務 Day11 - flex order

可以使用 order 屬性來調整 flex 子元素的排序，
order 預設值為 0，會依照 flex-direction 的方向依序排序

補充文章：
- [MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items#order_%E5%B1%9E%E6%80%A7)
- [order 屬性介紹](https://w3c.hexschool.com/flexbox/4007bc24)

## 題目
複製此 [Codepen](https://codepen.io/hexschool/pen/yLReNQR?editors=1100) 模板，調整四個區塊位置，使其呈現出下方畫面：（只需調整 `...` 的部分）


## 回報流程

1. 將答案貼在 Codepen 並複製 Codepen 連結貼至「回報區」回報
（也可以將答案直接貼至「回報區」）


<!--

解答：
https://codepen.io/hexschool/pen/BaqWqXM?editors=1100

-->

回報區
---

| 報數 | Discord 名字 | Codepen／其他回饋 |
|:----:|:-------------------:|:---------------------------------------------------------------------------------------------------------------------------------:|
| 1 | Rochel#4754 | [codepen](https://codepen.io/rochelwang1205/pen/MWPGEjd) |
| 2 | 冬天#5215 | [codepen](https://codepen.io/winter_/pen/LYgmzbR) |
| 3 | Eden.C#9359 | [codepen](https://codepen.io/iseden/pen/KKGRXgJ)|
| 4 | Kulimusoda | [codepen](https://codepen.io/yuch3n_chen/pen/eYPrGgO?editors=1100)|
| 5 | Ting.66#0912 | [codepen](https://codepen.io/Ting66/pen/OJBZxpZ?editors=1100)|
| 5 | Berlin#7338 | [codepen](https://codepen.io/3qberlin/pen/ZEqoXXz)|
6|雲漢#5319|[codepen](https://codepen.io/keon981/pen/jOexGGJ?editors=1100)
| 7 | DeLi#8324 | [codepen](https://codepen.io/delichaomoon/pen/LYgmzzx) |
| --- | -------------------- | -------------------------------------------------------------------------------- |
| 8 | Quantum#6093 | [Codepen](https://codepen.io/Min-Hao-Hung/pen/QWZrqBR) |
| 9 | JimWang#6134 | [Codepen](https://codepen.io/Jim-Wang-the-selector/pen/xxyjXyg) |
| 10 | SKey#9905 | [Codepen](https://codepen.io/Dale-Chien/pen/OJBZxqr) |
| 11 | Tami#6742 | [Codepen](https://codepen.io/wqsdqbjn-the-vuer/pen/gOBzGQd) |
| 12 | Daisy_Li#4231 | [codepen](https://codepen.io/lidairong-gmail-com/pen/bGmMoRm?editors=1100) |
| 13 | Snadra#1987 | [codepen](https://codepen.io/mlqmhltg/pen/xxyjPbL) |
| 14 | Eero#1147 | [codepen](https://codepen.io/Eero-Chiao/pen/RweyjPY?editors=1100) |
| 15 | Ann Chou#0146 | [codepen](https://codepen.io/annchou_illu/pen/qBJYVZp) |
| 16 | 辣椒#1002 | [codepen](https://codepen.io/chilichen118/pen/abRGVpV) |
| 17 | 阿榮#8277 | [Codepen](https://codepen.io/codeitaday/pen/QWZrOdb?editors=1100) |
| 18 | しあわせね#0036 | [codepen](https://codepen.io/Front-end-engineer/pen/QWZrOpj) |
| 19 | 黑白兔#0684 | [codepen](https://codepen.io/johnny329/pen/ExdLbwb) |
| 20 | 史滴芬#4310 | [codepen](https://codepen.io/steven870107/pen/XWxqzga) |
| 21 | 不要迷戀媽的奶#0295 | [codepen](https://codepen.io/kewdjbwp-the-typescripter/pen/vYVjWVM?editors=1100) |
| 22 | vvay#4113 | [codepen](https://codepen.io/pellmssx-the-sasster/pen/ExdLbGL) |
| 23 | Tina02#2691 | [codepen](https://codepen.io/chjitlox-the-bashful/pen/WNaJdbp) |
| 24 | Kaya#8857 | [codepen](https://codepen.io/laron9486/pen/BaqxJNz) |
| 25 | peihsuan#6315 | [Codepen](https://codepen.io/peihsuanlai/pen/qBJYVMM) |
| 26 | 汪汪#4486 | [Codepen](https://codepen.io/hunwooooof/pen/LYgmeWK) |
| 27 | judy123#2363 | [codepen](https://codepen.io/hsuantsong/pen/xxyjpOM?editors=1100) |
| 28 | jia yu#8896 | [codepen](https://codepen.io/fjqxaznl-the-reactor/pen/NWOMXXa?editors=1100) |
| 29 | ChaosTu#9311 | [codepen](https://codepen.io/torotu/pen/MWPGrzz?editors=1100) |
| 30 | Mindy#7886 | [codepen](https://codepen.io/Mindyr/pen/XWxqZrL) |
| 31 | 翔.#0859 | [codepen](https://codepen.io/energy95272z/pen/zYmjRZG) |
| 32 | Celia#1715 | [codepen](https://codepen.io/drdrvpgf-the-bashful/pen/LYgmQeW) |
| 33 | 陳庭#3529 | [codepen](https://codepen.io/yuting850309/pen/ZEqorrE?editors=1100) |
| 34 | Liyiling#4366 | [codepen](https://codepen.io/ritaling1021/pen/gOBzvez?editors=1100) |
| 35 | Hao#2485 | [codepen](https://codepen.io/Seanfeb16/pen/LYgmQJL) |
| 36 | Uli#1946 | [codepen](https://codepen.io/uli1313/pen/yLRjvQL) |
| 37 | gahwa#3562 | [codepen](https://codepen.io/gahwa17/pen/KKGRQrO) |
| 38 | Lychee KK | [Codepen](https://codepen.io/kakakala/pen/QWZrmjW?editors=1100) |
| 39 | DyH#0526 | [Codepen](https://codepen.io/dorihung/pen/XWxqVey?editors=1100) |
| 40 | CuraLin#2648 | [Codepen](https://codepen.io/curalin/pen/QWZrmmN) |
| 41 | townyuan#2653 | [Codepen](https://codepen.io/townyuan/pen/Baqxrra) |
| 42 | alexmav04#5048 | [Codepen](https://codepen.io/alexmav04/pen/vYVjRbw?editors=1100) |
| 43 | snow#0255 | [Codepen](https://codepen.io/snow21723/pen/bGmMvpX) |
| 44 | Jacky7035#9423 | [Codepen](https://codepen.io/adens123/pen/poxVVvr) |
| 45 | ABOOS#6276 | [Codepen](https://codepen.io/guhungyin/pen/oNaddBr?editors=1100) |
| 46 | Rayo#8002 | [Codepen](https://codepen.io/loborayo/pen/vYVjjRL) |
| 47 | 銀光菇#1692 | [codepen](https://codepen.io/genesynthesis/pen/bGmMorm) |
| 48 | Ataraxia#9977 | [codepen](https://codepen.io/ataraxia8888/pen/ZEqoKPQ) |
| 49 | 呵哈#6479 | [codepen](https://codepen.io/CHYETI/pen/abRGjzW) |
| 50 | satarkuo#5736 | [codepen](https://codepen.io/SatarKuo/pen/mdzLjdG?editors=1100) |
| 51 | David0799 | [codepen](https://codepen.io/David0799/pen/QWZrBbL?editors=1100) |
| 52 | StellaHsu#2687 | [codepen](https://codepen.io/stella950114/pen/xxyjJeJ) |
| 53 | Rey#1878 | [codepen](https://codepen.io/yfatgmpc-the-bold/pen/vYVjjpN?editors=1100) |
| 54 | HsienLu#8316 | [codepen](https://codepen.io/Hsienlu/pen/wvYjYQR) |
| 55 | Akira#9996 | [codepen](https://codepen.io/Akira-Chen/pen/rNqvQaM) |
| 56 | Evaxof#1266 | [codepen](https://codepen.io/evaxof/pen/QWZrJKw?editors=1100) |
| 57 | jimhop#6510 | [Codepen](https://codepen.io/jimsansssss/pen/YzJLRZO) |
| 58 | 姜承#8204 | [Codepen](https://codepen.io/Troy0718/pen/MWPGzee) |
| 59 | 浪裡小白龍#6860 | [Codepen](https://codepen.io/Emillo/pen/qBJYQPo?editors=1100) |
| 60 | Judy☻#7874 | [Codepen](https://codepen.io/hsiaohan/pen/zYmjMXW?editors=1100) |
| 61 | 兔子#6746 | [Codepen](https://codepen.io/CarrotDetector/pen/vYVjvEo) |
| 62 | 司機叔叔#2463 | [Codepen](https://codepen.io/bigv5566/pen/poxVqLL) |
| 63 | henrykgb#5749 | [Codepen](https://codepen.io/henrymorgan666/pen/yLRjGEE?editors=1100) |
| 64 | 吳偉雄恩#2256 | [Codepen](https://codepen.io/Bamboo1212/pen/NWOMeza?editors=1100) |
| 65 | jelly77#2088 | [Codepen](https://codepen.io/Ming-chiang/pen/jOexXgp?editors=1100) |
| 66 | jackwu#4437 | [Codepen](https://codepen.io/jackwu1588003/pen/KKGRJqJ) |
| 67 | 肉魚#2149 | [Codepen](https://codepen.io/zoechen13/pen/gOBzqZj) |
| 68 | wiimax#4564 | [Codepen](https://codepen.io/willismax/pen/eYPrxbp) |
| 69 | Hanana#9025 | [Codepen](https://codepen.io/hananalin/pen/QWZrqxP) |
| 70 | Bruce-Lee#0629 | [Codepen](https://codepen.io/xxhdklwi-the-decoder/pen/qBJYLxz) |
| 71 | N0c7iluc3n7#4390 | [Codepen](https://codepen.io/huang-yu-cheng/pen/gOBzEoJ) |
| 72 | Yuu#5361 | [Codepen](https://codepen.io/alycehwy/pen/JjmvzZv) |
| 73 | homer#1525 | [Codepen](https://codepen.io/Buckhorn/pen/MWPGRrG) |
| 74 | PayRoom#8328 | [CodePen](https://codepen.io/water38198/pen/PoyaqER) |
| 74 | Jennifer Chuang#3937 | [Codepen](https://codepen.io/yujhen/pen/QWZxjBy) |
| 75 | liam9930#4129 | [Codepen](https://codepen.io/jgnjfvvt-the-lessful/pen/eYPKJdM) |
| 76 | LeeRu#1771 | [Codepen](https://codepen.io/IMGameKing/pen/YzJvwQK?editors=0100) |
| 77 | andychiou#4830 | [Codepen](https://codepen.io/andychiou1113/pen/WNaywoK) |
| 77 | bonnieli1414#4906 | [Codepen](https://codepen.io/bonnieli1414/pen/bGmKpyz?editors=1100) |
| 78 | yuki#9465 | [Codepen](https://codepen.io/yukilin549/pen/BaqVKeG?editors=1100) |
| 79 | 肉個阿倫#7172 | [Codepen](https://codepen.io/i9574385/pen/dygKXze) |
| 80 | K（アギルダー）#0386 | [Codepen](https://codepen.io/klay376014/pen/YzJvGwb) |
| 81 | 魚翅#3100 | [Codepen](https://codepen.io/Fukahire/pen/mdzKOVW) |
| 82 | alan0305#2423 | [Codepen](https://codepen.io/alan0305/pen/NWOzbmo) |
| 83 | ray0304#2070 | [Codepen](https://codepen.io/Ray0304/pen/yLREgRV) |
| 84 | yoyo#1003 | [Codepen](https://codepen.io/pen/VwEdbxb) |
| 85 | Döng#2328 | [Codepen](https://codepen.io/htamlkdz-the-encoder/pen/NWOzvrR) |
| 86 | andrew0404#4576 | [Codepen](https://codepen.io/Loonng/pen/rNqKpgo) |
| 87 | Zhong#8917 | [Codepen](https://codepen.io/klfjrlod-the-sasster/pen/JjmZazq) |
| 88 | Kun#8009 | [Codepen](https://codepen.io/khugjkcd-the-reactor/pen/WNayaJg) |
| 89 | 大頭#1695 | [Codepen](https://codepen.io/conlyvrg-the-reactor/pen/jOeKeKX) |
| 90 | PoWei#8484 | [Codepen](https://codepen.io/harrison-wei-lai/pen/eYPKPbO) |
| 91 | moins13#3346 | [Codepen](https://codepen.io/kyechen13/pen/NWOzejR) |
| 92 | YHT#1696 | [Codepen](https://codepen.io/YHT31/pen/PoyeRvq) |
| 93 | 長方形#9612 | [Codepen](https://codepen.io/imjjw/pen/wvYXROd) |
| 94 | duck#3310 | [Codepen](https://codepen.io/papy0715/pen/poxKYev) |
| 95 | HsuanTang#1349 | [Codepen](https://codepen.io/HsuanTang/pen/ZEqRdxO) |
| 96 | Janet#5784 | [Codepen](https://codepen.io/janetlinnn/pen/vYVrqwv) |
| 97 | MitA#7407 | [Codepen](https://codepen.io/qaz15996398/pen/MWPXNdX) |
| 98 | 泊岸#3466 | [Codepen](https://codepen.io/qoq77416416/pen/LYgBYjz?editors=1100) |
| 99 | 一瑋#8459 | [CodePen](https://codepen.io/zerosula/pen/qBJKEag) |
| 100 | 冷曄#9378 | [CodePen](https://codepen.io/HgHale/pen/KKGBVMN) |
| 101 | charlottelee849#0366 | [CodePen](https://codepen.io/char849/pen/oNaMxKZ?editors=1100) |
| 102 | 變羊魔法#6372 | [Codepen](https://codepen.io/cssf998811/pen/bGmjBzj) |
| 103 | jun777#2468 | [Codepen](https://codepen.io/js18151102/pen/wvYxgwE) |
| 104 | Pigsue#5981 | [Codepen](https://codepen.io/weixiii/pen/YzJjZxM?editors=1100) |
| 105 | chichi#1534 | [Codepen](https://codepen.io/chichihuang/pen/LYgBzmG) |
| 106 | Lainie#1931 | [Codepen](https://codepen.io/Lainie88/pen/LYgBeVr?editors=1100) |
| 107 | Aritan#1931 | [Codepen](https://codepen.io/Aritan/pen/rNqrvov?editors=1100) |
| 108 | 歐陽龍龍#1061 | [Codepen](https://codepen.io/dizzydog-rgb/pen/mdzjayv?editors=1100) |
| 109 | Maxine#9061 | [Codepen](https://codepen.io/Maxine_Liao/pen/BaqPEwy) |
| 110 | Pei#5161 | [Codepen](https://https://codepen.io/Pei0303/pen/zYmLQyg) |
| 111 | boki#3717 | [Codpen](https://codepen.io/boki-wang/pen/xxyaGzK) |
| 112 | 鉦勝#8333 | [Codpen](https://codepen.io/atckmax823/pen/jOevqQp?editors=1100) |
| 113 | penny#6214 | [Codpen](https://codepen.io/penny8989/pen/JjmaKOE?editors=1100) |
| 114 | Yvonne#2721 | [Codpen](https://codepen.io/Evonne/pen/wvYEzxK?editors=1100) |
| 115 | 依依#6306 | [Codpen](https://codepen.io/Rita-Yang/pen/qBJMqyB?editors=1100) |
| 116 | 小華#3204 | [Codpen](https://codepen.io/franfranfran/pen/qBJMgdL?editors=1100) |
| 117 | 鄭舜仁#6606 | [Codpen](https://codepen.io/randomno/pen/xxyaEzz) |
| 118 | betty#0693 | [Codpen](https://codepen.io/betty-hu/pen/yLRRPdB?editors=1100) |
| 119 | ssshane#0673 | [Codpen](https://codepen.io/sam6091260/pen/vYVVpVv) |
| 120 | FiReBrO#0557 | [Codpen](https://codepen.io/firebro42/pen/mdzzvBd) |
| 121 | Tim123#8361 | [Codpen](https://codepen.io/Wangtim4/pen/xxyQVgJ) |
| 122 | wendyli#2155 | [Codepen](https://codepen.io/rockayumitw/pen/GRYwYVo?editors=1100) |
| 123 | JasonChang#7847 | [Codepen](https://codepen.io/jsonChangJava/pen/jOeQodm?editors=1100) |
| 124 | Sonia Wu#7154 | [Codepen](https://codepen.io/YUJOU/pen/MWPZWxL?editors=1100) |
| 125 | alll6z#9204 | [Codepen](https://codepen.io/A6Z/pen/gOBZbrv) |
| 126 | NathanJames#8120 | [Codepen](https://codepen.io/ufo060204/pen/zYmyzzy) |
| 127 | Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/oNaJeYB?editors=1100) |
| 128 | +7#8492 | [CodePen](https://codepen.io/tojibom/pen/JjmwZVm?editors=1100) |
| 129 | JhouHank#8132 | [Codepen](https://codepen.io/JhouHank/pen/QWZzxyW) |
| 130 | Jaredlee#5887 | [Codepen](https://codepen.io/jared-lee/pen/xxyMxpB) |
| 131 | weiting#3489 | [Codepen](https://codepen.io/weiting14/pen/RwevxLg?editors=1100) |
| 132 | 狸貓#5863 | [Codepen](https://codepen.io/tanuki320/pen/MWPZmwe) |
| 133 | 羽毛#5463 | [Codepen](https://codepen.io/KYuFeather/pen/jOedRVK) |
| 134 | 小魚#8614 | [Codepen](https://codepen.io/gizelliang/pen/OJBqyQM) |
| 135 | Syrena#3897 | [Codepen](https://codepen.io/Syrena-Chung/pen/VwERmEd) |
| 136 | lishuan#3698 | [Codepen](https://codepen.io/lishuan/pen/mdzoRPY) |
| 137 | 林炘秀#4223 | [Codepen](https://codepen.io/afjrvjzl-the-bashful/pen/ZEqPvYj) |
| 138 | 小明#4408 | [Codepen](https://codepen.io/ujlylmbv-the-lessful/pen/VwERgvb) |
| 139 | FanJJ#8061 | [Codepen](https://codepen.io/yfchenn/pen/xxyeXed?editors=1100) |
| 140 | Rowan#3253 | [Codepen](https://codepen.io/Rowanlin/pen/WNaWymB) |
| 141 | 喬喬#2824 | [Codepen](https://codepen.io/joanne-wei/pen/qBJweye) |
| 142 | 杰_jie#9088 | [Codepen](https://codepen.io/hmj8805/pen/ZEqNQYa?editors=1100) |
| 143 | 東東#5015 | [Codepen](https://codepen.io/wearymask/pen/dygEMzN) |
| 144 | 柚子#3958 | [Codepen](https://codepen.io/as6625998/pen/RwemBzO?editors=1100) |
| 145 | 又竹#7302 | [Codepen](https://codepen.io/YO_ZU/pen/vYVqPpR) |
| 146 | 路人ADCB#9851 | [Codepen](https://codepen.io/markyourpage/pen/PoxYQYo) |
| 147 | 初心#9021 | [Codepen](https://codepen.io/Sylviax/pen/qBQEpVR?editors=1100) |
| 148 | ztion#8403 | [Codepen](https://codepen.io/ztion/pen/abQONBw?editors=1100) |
| 149 | 慢慢來#4035 | [Codepen](https://codepen.io/kikiyang/pen/QWJbpzo?editors=1100) |
| 150 | Joanne Hu#0010 | [Codepen](https://codepen.io/nelbabkv-the-flexboxer/pen/GRwJONg?editors=1100) |
| 151 | pss940909#8650 | [Codepen](https://codepen.io/pss940909/pen/bGQdaLj?editors=1100) |
|152|cmlb0212|[Codepen](https://codepen.io/Chungmin0212/pen/XWymwBj?editors=1100)|