---
# System prepended metadata

title: "\U0001F3C5 切版任務 Day11 - flex order"
tags: [軟體工程師體驗營 - 2023]

---

---
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) 模板，調整四個區塊位置，使其呈現出下方畫面：（只需調整 `...` 的部分）

![](https://i.imgur.com/y22XwpD.png)




## 回報流程

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

![](https://i.imgur.com/vftL5i0.png)

<!-- 

解答：
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)|