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

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


HTML

<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

.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://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)