---
# System prepended metadata

title: "\U0001F3C5 Day 15"
tags: [網頁切版直播班 - 2022 夏季班]

---

---
tags: 網頁切版直播班 - 2022 夏季班
---
# 🏅 Day 15

## flex 多屬性練習
下方有提供部分程式碼，請試著在「`...`」的地方加上 flex 屬性完成剩下的版型，如圖：

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

HTML
```htmlembedded=
<nav class="nav">
    <img src="https://www.filepicker.io/api/file/tNa2so2RRMuedpc2yydt" alt="logo" width="100">
  <ul class="nav-list">
    <li class="nav-item"><a class="nav-link" href="#">首頁</a></li>
    <li class="nav-item"><a class="nav-link" href="#">關於</a></li>
    <li class="nav-item"><a class="nav-link" href="#">產品</a></li>
    <li class="nav-item"><a class="nav-link" href="#">購物車</a></li>
  </ul>
</nav>

<div class="container">
  <div class="card">
  <img class="card-img" src="https://images.unsplash.com/photo-1493770348161-369560ae357d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" width="200">
  <div class="card-body">
    <h2 class="title">標題文字</h2>
    <p class="subtitle">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti ipsum ab sit neque accusamus praesentium, quisquam veritatis perferendis ipsa aspernatur nulla!<a href="https://unsplash.com/photos/HlNcigvUi4Q">圖來自unsplash</a>
    </p>
    <a href="#" class="btn">點我</a>
      </div>
   </div>
</div> 

```

CSS
```css=
.nav{
  background-color: #e8eeea;
  padding: 0 10px;
  margin-bottom: 25px;
  ...
}
.nav-list{
  ...
}
.nav-link{
  text-decoration: none;
  color: #00cc99;
  padding: 5px 10px;
}
.container{
  width: 800px;
  margin: 0 auto;
}
.title{
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 5px;
}
.card{
  margin-bottom: 10px;
  ...
}
.card:nth-child(2){
  ...
}
.card:nth-child(2) .card-img{
   margin-right: 0;
   margin-left: 5px;
}
.card-img{
  margin-right: 5px;
}
.btn{
  width: 50px;
  padding: 8px 16px;
  color: white;
  background-color: #00cc99;
  text-decoration: none;
  display: block;
  margin-left: auto;
  text-align: center;
}
```
> 記得加上 CSS Reset
> nth:child(n) 的用法可以參考[此文章](https://code.tutsplus.com/zh-hant/tutorials/the-30-css-selectors-you-must-memorize--net-16048)的第 22 項


## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 
解答位置請參考下圖（需打開程式碼的部分觀看）

![](https://i.imgur.com/vftL5i0.png)
https://codepen.io/a0071421/pen/PoRbdJe
<!-- 解答：https://codepen.io/hexschool/pen/ZExEzyB -->


回報區
---


|      Discord      |                               CodePen / 答案                                |
|:-----------------:|:---------------------------------------------------------------------------:|
|     薏慈#3795     |             [CodePen](https://codepen.io/its_wang/pen/VwXdybY)              |
|     小鐵#2814     |             [CodePen](https://codepen.io/a0071421/pen/PoRbdJe)              |
|   Anna Liu#3794   |              [CodePen](https://codepen.io/anna618/pen/vYRyMVd)              |
|     𝓛𝓊𝒸𝓎#8635     |             [CodePen](https://codepen.io/lucygirl/pen/qBobbwz)              |
|     Chi#7605      |              [Codepen](https://codepen.io/YoChi84/pen/BarQrEm)              |
|    布魯諾#7239    |             [Codepen](https://codepen.io/bruno-yu/pen/LYdbdoG)              |
|   CloThEs#7837    |         [Codepen](https://codepen.io/bogwdnxx-the-sans/pen/oNqYqOb)         |
|  Clara Cai#7097   |            [Codepen](https://codepen.io/Clara-Snowy/pen/zYWoWXg)            |
|   LinaChen#1796   |             [Codepen](https://codepen.io/LinaChen/pen/QWmGrLV)              |
|    Clara#1275     |             [CodePen](https://codepen.io/bsupixqu/pen/KKoNRpb)              |
|    natsu#2592     |              [CodePen](https://codepen.io/natsu19/pen/gOeLzOG)              |
|     大衛#4869     |             [CodePen](https://codepen.io/exnsrpjc/pen/qBoqYbZ)              |
|  Karol-Kuo#5287   |            [CodePen](https://codepen.io/ting-yu-kuo/pen/eYMBrpw)            |
|    JackC#0411     |              [CodePen](https://codepen.io/key0329/pen/wvmojGX)              |
|     L0F0#8733     |               [CodePen](https://codepen.io/l0f0/pen/YzapLqV)                |
|     yuyu#6310     |       [CodePen](https://codepen.io/yuyu0905/pen/jOzVxwJ?editors=1100)       |
|    hungya#0773    |      [CodePen](https://codepen.io/hungya777/pen/GRxNdWy?editors=1100)       |
|     鴨鴨#9822     |       [CodePen](https://codepen.io/qrvrqvxv-the-selector/pen/bGvBMoQ)       |
|    Benson#6763    |             [CodePen](https://codepen.io/kumashow/pen/abYBGqm)              |
|     威爾#1694     |              [CodePen](https://codepen.io/WILL_Wu/pen/BarQxxq)              |
|      peter#       |      [CodePen](https://codepen.io/JIAN-RONG/pen/poLNVLM?editors=1100)       |
|  christina#6185   |            [Codepen](https://codepen.io/chrisc0210/pen/rNdWvoe)             |
|  Iris Huang#6727  |              [Codepen](https://codepen.io/ythuang/pen/BarQxbM)              |
|  PeggyLiao#1552   |      [CodePen](https://codepen.io/PeiJu-Liao/pen/WNzoJLB?editors=0100)      |
|    連小艾#0791    |             [CodePen](https://codepen.io/bolaslien/pen/poLNKzJ)             |
|     小諾#1866     |              [CodePen](https://codepen.io/noichan/pen/yLKVjdY)              |
|    Fang #4680     |             [Codepen](https://codepen.io/std95174/pen/BarQVNe)              |
|  LHchien33#6232   |             [Codepen](https://codepen.io/lin_chien/pen/gOeLKME)             |
|     Sin#0040      | [Codepen](https://codepen.io/sophmfyt-the-sasster/pen/abYBKJV?editors=1100) |
|    kevin#6131     |       [Codepen](https://codepen.io/xlqjezvc-the-encoder/pen/MWVbXej)        |
|    Arista#5802    |           [Codepen](https://codepen.io/arista-hsieh/pen/OJvbEQL)            |
|    mickey#8745    |            [Codepen](https://codepen.io/weizhetseng/pen/PoRbamr)            |
|    黑白兔#0684    |             [Codepen](https://codepen.io/johnny329/pen/vYRyrRP)             |
|    SASIMI#5099    |            [Codepen](https://codepen.io/sashimi1327/pen/BarLoBR)            |
|   JarDar #6980    |             [codepen](https://codepen.io/jardarpen/pen/jOzVKBW)             |
|     威0#6919      |     [Codepen](https://codepen.io/n0918679182/pen/ExENRrR?editors=1100)      |
|   Amberhh#2465    |       [Codepen](https://codepen.io/Amberhh/pen/eYMBKaV?editors=1100)        |
|     得源#8355     |             [CodePen](https://codepen.io/aglgvsie/pen/qBoqKoy)              |
|     群嘉#3943     |       [CodePen](https://codepen.io/efzdamnp-the-lessful/pen/eYMBLYa)        |
|     Hsiu#8767     |             [CodePen](https://codepen.io/amy-hsiu/pen/vYRyaqg)              |
|   Jamie Wu#9345   |             [CodePen](https://codepen.io/Wu220103/pen/VwXmGpb)              |
|    Melon#0380     |             [CodePen](https://codepen.io/BalaFang/pen/oNqYPZB)              |
|   Jenny真#7532    |     [CodePen](https://codepen.io/wei-chen-wu/pen/QWmGVwV?editors=1100)      |
|     小白#2406     |            [CodePen](https://codepen.io/gracewhite/pen/dymOjWb)             |
|   NeilLin#3009    |             [CodePen](https://codepen.io/a0071421/pen/PoRbdJe)              |
|   Leo Song#8278   |      [Codepen](https://codepen.io/sunnylaba/pen/ExENewP?editors=1100)       |
|    黃士桓#7654    |          [codenPen](https://codepen.io/shr-huan-huang/pen/jOzVvzo)          |
|   Daisy_li#4231   | [CodePen](https://codepen.io/lidairong-gmail-com/pen/mdxOGxx?editors=1100)  |
|      Ke#1391      |             [CodePen](https://codepen.io/federerke/pen/WNzoKxO)             |
|     雷雷#7844     |            [CodePen](https://codepen.io/lei-yi-jie/pen/zYWomZd)             |
|    阿翰 #1984     |      [CodePen](https://codepen.io/JohnHan05/pen/RwMoYmJ?editors=1100)       |
|    jeter#8014     |      [CodePen](https://codepen.io/gi-tai-she/pen/ZExBqxy?editors=1100)      |
|  jin.huang#4666   |        [CodePen](https://codepen.io/HJ7878/pen/QWmGJKM?editors=1100)        |
|      Van.CS       |       [Codepen](https://codepen.io/fbacojji-the-selector/pen/eYMBQpr)       |
|     洋蔥#5295     |               [Codepen](https://codepen.io/HSUNA/pen/gOeLQMP)               |
|      YI#0863      |        [Codepen](https://codepen.io/YI0305/pen/abYBQPe?editors=1100)        |
|  我是泇吟 #5189   |             [CodePen](https://codepen.io/kljuqbxs/pen/GRxNPGd)              |
|   kittyko #5951   |              [CodePen](https://codepen.io/kittyko/pen/JjLbZMv)              |
|    leeli #6243    |       [CodePen](https://codepen.io/leelilee/pen/RwMoEXB?editors=1100)       |
|   WEI_RIO#9342    |        [CodePen](https://codepen.io/wei_wu/pen/yLKVZMJ?editors=1100)        |
|     QOO#8446      |              [CodePen](https://codepen.io/QOOQOOQ/pen/gOeLgxL)              |
|    Joyce#3790     |      [CodePen](https://codepen.io/joycehuang/pen/eYMBxGW?editors=1100)      |
|     yu魚#1330     |               [CodePen](https://codepen.io/Yu_yu/pen/GRxNzEe)               |
|  浪裡小白龍#6860  |              [CodePen](https://codepen.io/Emillo/pen/WNzoPve)               |
|  Sentiments#4883  |      [codepen](https://codepen.io/Sentiments/pen/YzapgoG?editors=1100)      |
|  suihsilan#9485   |             [codepen](https://codepen.io/suihsilan/pen/YzapMzp)             |
|     東懂#3762     |             [codepen](https://codepen.io/tone-lee/pen/xxWRedV)              |
|     狸貓#5863     |             [codepen](https://codepen.io/tanuki320/pen/jOzVRwd)             |
| Ryan Chiang#6649  |      [Codepen](https://codepen.io/ryanchiang/pen/zYWoXRr?editors=1100)      |
|  Winnie Wu#5468   |       [Codepen](https://codepen.io/Pooh-Wu/pen/jOzVRyX?editors=1100)        |
|     鑫鑫#4346     |       [CodePen](https://codepen.io/Neil1024/pen/zYWoXJq?editors=1100)       |
|    ssozr#4680     |               [codepen](https://codepen.io/ssozr/pen/vYRywOa)               |
|    Mylène#2481    |            [Codepen](https://codepen.io/hamajibashi/pen/PoRbrGN)            |
|     YU #0618      |              [CodePen](https://codepen.io/yoken_/pen/abYBgvR)               |
| bonnieli1414#4906 |     [Codepen](https://codepen.io/bonnieli1414/pen/abYpzGZ?editors=1100)     |
|     zera#6060     |            [Codepen](https://codepen.io/zera-tseng/pen/QWmGVWV)             |
|     LINK#1933     |              [Codepen](https://codepen.io/miyayoe/pen/XWEpbNM)              |
|    Shang#9066     |      [Codepen](https://codepen.io/shang1104/pen/YzaNXQO?editors=1100)       |
|    Carrie#2750    |            [Codepen](https://codepen.io/carrie-wang/pen/KKoapRM)            |
|     阿蘇#8531     |             [Codepen](https://codepen.io/susu8327/pen/KKoapBg)              |
|   Yuan962#5897    |           [Codepen](https://codepen.io/Jasmine-Liao/pen/XWEpmpB)            |
|    Henry#7386     |               [Codepen](https://codepen.io/h1nr9/pen/oNqBjeK)               |
| Yuna Huang #2692  |       [Codepen](https://codepen.io/Yuna1002/pen/MWVJavG?editors=1100)       |
|     咻蹦#1526     |       [Codepen](https://codepen.io/emmasyu/pen/YzaNwEQ?editors=1100)        |
|    鉦勝 #8333     |            [Codepen](https://codepen.io/atckmax823/pen/abYpNZw)             |
|    Jason1#2538    |       [CodePen](https://codepen.io/jotwxezb-the-encoder/pen/KKoazeM)        |
|     Vera#5592     |              [CodePen](https://codepen.io/skvera/pen/Barpdwx)               |
|    toshow#5609    |              [CodePen](https://codepen.io/toshow/pen/NWYdvLE)               |
|    GARBO#6659     |             [CodePen](https://codepen.io/garbo8130/pen/oNqBeKe)             |
|    楓之聲#6945    |             [Codepen](https://codepen.io/sshane258/pen/GRxrxEJ)             |
|   Tuhacrt#0008    |              [CodePen](https://codepen.io/Tuhacrt/pen/rNdjdvZ)              |
|   Fanglin#4054    |            [CodePen](https://codepen.io/flynn841028/pen/poLRKay)            |
|   ajhappy#6488    |            [CodePen](https://codepen.io/ajhappy5438/pen/PoRWXmJ)            |
|      YC#2522      |               [CodePen](https://codepen.io/YCLu/pen/abYpQKX)                |
|     Shuo#1596     |          [CodePen](https://codepen.io/chiangchungshuo/pen/VwXPgoq)          |
|     int#7518      |             [Codepen](https://codepen.io/intHuang/pen/YzaNgWb)              |
|   RayChen#6088    |            [Codepen](https://codepen.io/raychen1996/pen/KKoWPdO)            |
|    Yunei#6323     |               [Codepen](https://codepen.io/Yunei/pen/gOemYrd)               |
|    阿基基#2557    |             [codepen](https://codepen.io/JIJI_GNI/pen/MWVJEZp)              |
| Iris Chen#3872 |[codepen](https://codepen.io/iris-yhc/pen/KKoWwjL)              |
| kancheng#3915 |[codepen](https://codepen.io/kancheng/pen/QWmpbQW)              |
| YaWen#2752 |[codepen](https://codepen.io/yuwendy/pen/OJvpgjy)              |
| Vian#7338 |[codepen](https://codepen.io/vianwu31/pen/gOemKRd)              |
| Pony#6778 |[codepen](https://codepen.io/Pony0303/pen/ZExeRgL)              |
| Ron Liang#7277 |[codepen](https://codepen.io/ron-go/pen/xxWqoqj)              |
| 紙飛機#1335 |[codepen](https://codepen.io/paperplanea/pen/jOzBjzy)|
| EmilyLin#0526 |[codepen](https://codepen.io/c199615/pen/ExEmayr)|
| IreneY #0086 | [Codepen](https://codepen.io/HalfPlannedJourney/pen/NWYjNeZ) |
| 瑞瑞#4605 |[codepen](https://codepen.io/tsai-li-ting/pen/jOzmYmY)|
| WEI#0797 |[codepen](https://codepen.io/wei-z/pen/vYRmaZv)|
| 艾草#4830 |[codepen](https://codepen.io/jmkhsutp/pen/GRxErqw?editors=1100)|
| Tori#1248 |[codepen](https://codepen.io/FlyTori/pen/ExEXzKB)|
| 艾芮絲#6060 |[codepen](https://codepen.io/wangyingju/pen/rNdwgYX)|
| 肉魚#2149 |[codepen](https://codepen.io/zoechen13/pen/QWmgXyX)|
| Nini Chen#5790 |[codepen](https://codepen.io/ninistyle/pen/vYRZEEo?editors=1100)|
|hua#9099|[Codepen](https://codepen.io/LHua/pen/JjLyXrd)|
|Deborah#0033|[Codepen](https://codepen.io/deborah-tsai/pen/yLKozPQ)|
|Cream#3449|[Codepen](https://codepen.io/frxdwbbi-the-sasster/pen/ZExJaVB?editors=1100)|
|熊二#3824|[CodePen](https://codepen.io/BeckLai/pen/jOzGObd)|
| 柏PO #5617| [CodePen](https://codepen.io/apo_1798/pen/ZExXGrV)|
|鎔瑄#8578|[Codepen](https://codepen.io/barbarayou/pen/bGvYoPY?editors=1100)|
|Manson許 #2295|[Codepen](https://codepen.io/oupbzfxq-the-scripter/pen/MWVOBxg)|
|Susie(軒)#6181|[Codepen](https://codepen.io/Codeleaf/pen/MWVrarx)|
|mei#8421|[Codepen](https://codepen.io/Shila-Chen/pen/MWVrWYP)|
|ROKA#4051|[CodePen](https://codepen.io/chengchiaoyi/pen/NWYwqqb?editors=1100)|
|rueee#7997|[CodePen](https://codepen.io/Jull-C/pen/OJvQpgw)|
|Jumpye#8601|[CodePen](https://codepen.io/Jumpye/pen/ZExrPJj?editors=1100)|
|sophiee#7015|[Codepen](https://codepen.io/sophiee2727/pen/GRxQbEZ)|
|CJ07#0176|[Codepen](https://codepen.io/cjtseng07/pen/XWEExBg?editors=1100)|
|RuoAn#7124|[Codepen](https://codepen.io/LiauRuoAn/pen/OJvEgzJ)|
|Gui#9571|[CodePen](https://codepen.io/guitimliu/pen/mdxKXbw)|
|Rena#6249|[CodePen](https://codepen.io/aureate0116/pen/ExEddZG)|
|Bonnie#7529|[CodePen](https://codepen.io/Calista316/pen/PoRxWQe)|
|NathanJames#8120|[CodePen](https://codepen.io/ufo060204/pen/PoRxOER)|
|skypassion5000#4151|[CodePen](https://codepen.io/skypassion5000/pen/WNzLyQr?editors=1100)|
|KT Hsieh#2861|[CodePen](https://codepen.io/KTHsieh/pen/wvmZqym)