# 🏅 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/hexschool/pen/ZExEzyB
-->

回報區
---

|#|Discord|CodePen / 答案|
|:----:|:----:|:----:|
| 1 | han | [Codepen](https://codepen.io/iamHanCheng/pen/xxoxBGb) |
| 2 | macihuang | [Codepen](https://codepen.io/macy1215/pen/poQKExM) |
| 3 | 毛巾 | [Codepen](https://codepen.io/bqdcjboa-the-solid/pen/ExBjjQe) |
| 4 | Hailey | [Codepen](https://codepen.io/sxbokfja-the-flexboxer/pen/wvLaaXo) |
| 5 | Mars | [Codepen](https://codepen.io/MarsKuo/pen/OJeVVrR?editors=1100) |
| 6 | tim | [Codepen](https://codepen.io/jskrtivy-the-animator/pen/abgoOme) |
| 7 | ya_meow |[Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/WNqvvLO?editors=1100)|
| 8 | GAVI | [Codepen](https://codepen.io/qbafldcv-the-scripter/pen/rNEVOBQ?editors=1100) |
| 9 | OSN |[Codepen](https://codepen.io/osncodepen/pen/WNqvQbX)|
| 10 | fendy1223 | [Codepen](https://codepen.io/fendy1223/pen/rNEVOOo) |
| 11 | Noelle | [Codepen](https://codepen.io/NoelleKH/pen/abgOvwo) |
| 12 | Amy(咂摳) | [Codepen](https://codepen.io/nnxucgmc-the-builder/pen/zYVGvdg?editors=1100) |
| 13 | Dolce_墨 | [Codepen](https://codepen.io/DolceTseng1026/pen/bGPdVeY) |
| 14 | Mike | [Codepen](https://codepen.io/mike2049/pen/poXJjWQ?editors=1100) |
| 15 | Ariel | [Codepen](https://codepen.io/ariel0510/pen/OJeVyQz) |
| 16 | kawa | [Codepen](https://codepen.io/z83xji6/pen/LYKVpOG) |
| 17 | Kerwin | [Codepen](https://codepen.io/kerwin/pen/ExBjVea) |
| 18 | NocabWang(培根) | [Codepen](https://codepen.io/PeihanWang/pen/BagNoeP?editors=1100) |
| 19 | brucelee0629 | [Codepen](https://codepen.io/xxhdklwi-the-decoder/pen/zYVGrOr?editors=1100) |
| 20 | lianne._. | [Codepen](https://codepen.io/Elaina-L/pen/VwJLeeM) |
| 21| yoishere | [Codepen](https://codepen.io/yoishere/pen/MWMwwGr) |
| 22 | chuang | [Codepen](https://codepen.io/uidoytjq-the-solid/pen/JjQdGQL) |
| 23 | david1819 | [Codepen](https://codepen.io/David-Lin-the-vuer/pen/GRbJJLZ?editors=1100) |
| 24 | Yolanda | [Codepen](https://codepen.io/vcscqrtz-the-animator/pen/RwzPaRm?editors=1100) |
| 25 | Jack | [Codepen](https://codepen.io/kxbhixte-the-sasster/pen/MWMwyGr) |
| 26 | 俊 | [Codepen](https://codepen.io/jun12079/pen/jOjPqXG) |
| 27 | 皮皮 | [Codepen](https://codepen.io/rainbow-the-reactor/pen/jOjPrWz) |
| 28 | Jainee | [Codepen](https://codepen.io/Jainee0110/pen/eYwNzGo) |
| 29 | w | [Codepen](https://codepen.io/Wei-the-sasster/pen/RwzPRJV?editors=1100) |
| 30 | 黛西 | [Codepen](https://codepen.io/ChiashengLin/pen/VwJLjXm) |
| 31 | hedwig | [Codepen](https://codepen.io/adirehfz-the-encoder/pen/bGPdexK) |
| 32 | KUN. | [Codepen](https://codepen.io/barry91205/pen/wvLazBY) |
| 33 | Jim | [Codepen](https://codepen.io/JimChou/pen/jOjPMeP?editors=1100) |
| 34 | Sammy | [Codepen](https://codepen.io/fsczdlla-the-bold/pen/vYqOXOW?editors=1100) |
| 35 | Sonia | [Codepen](https://codepen.io/YUJOU/pen/abgOBbq?editors=1100) |
| 36 | 喵喵 | [Codepen](https://codepen.io/snow1224/pen/LYKVbXo) |
| 37 | N7 | [Codepen](https://codepen.io/neohyntw/pen/QWXbdJZ) |
| 38 | hsiu8767 | [Codepen](https://codepen.io/hsiu8767/pen/qBzdrzo) |
| 39 | MY | [Codepen](https://codepen.io/ahmomoz/pen/QWXbvLy) |
| 40 | jimmy.0706 | [Codepen](https://codepen.io/JimmyMao/pen/XWLbRMZ?editors=1100) |
| 41 | hao jing | [Codepen](https://codepen.io/hjxu/pen/MWMwKqe?editors=1100) |
| 42 | Kaya | [Codepen](https://codepen.io/kayaribi/pen/jOjPmyV) |
| 43 | 超立方體Andy |[Codepen](https://codepen.io/Andy-Yu-the-scripter/pen/dyBoWZr)|
| 44 | KevinHuang |[Codepen](https://codepen.io/qw-huang/pen/gONpWja?editors=1100)|
| 45 | emmayo |[Codepen](https://codepen.io/emmayo/pen/rNEVYvg)|
| 46 | neoyo |[Codepen](https://codepen.io/Neo-oo/pen/mdZJqxm)|
| 47 | 邵 |[Codepen](https://codepen.io/ukscrlno-the-typescripter/pen/OJeVzbo)|
| 48 | TONY | [Codepen](https://codepen.io/Ming-Tung-Chien/pen/jOjPYxO) |
| 49 | lunlun0514 |[Codepen](https://codepen.io/f5badapple/pen/bGPdaQX)|
| 50 | 小咪 |[Codepen](https://codepen.io/iloveu3000x/pen/wvLayOo)|
| 51 | Angela_la |[Codepen](https://codepen.io/Angela-the-builder/pen/GRbJjQY?editors=1100)|
| 52 | ss585801. |[Codepen](https://codepen.io/ss585801/pen/MWMwaaq?editors=1100)|
| 53 | 1457 | [Codepen](https://codepen.io/1457dys/pen/ExBjJLZ) |]
| 54 | Sinyi | [Codepen](https://codepen.io/sinyiii/pen/NWZqZGg)
| 55 | 小翎 |[CodePen](https://codepen.io/debbielin/pen/YzoXmja?editors=1100)|
| 56 | Kai |[CodePen](https://codepen.io/beginneraboutlife116/pen/poXjvPX)|
| 57 | DoryH | [Codepen](https://codepen.io/dorihung/pen/zYVvxjK) |
| 58 | Lobinda | [Codepen](https://codepen.io/Lobinda/pen/RwzWbqb) |
| 59 | Aura Tao| [Codepen](https://codepen.io/AURATAO/pen/RwzWPaE) |
| 60 | 泊岸| [Codepen](https://codepen.io/qoq77416416/pen/mdZeJBY?editors=1100) |
| 61 | 陳小廷 | [Codepen](https://codepen.io/ting1124/pen/PorPPLJ) |
| 62 | anderson666 | [Codepen](https://codepen.io/goodmanbuild/pen/mdZePxZ) |
| 63 | arvin | [Codepen](https://codepen.io/arvinyang1925/pen/NWZGRzm) |
| 64 | 嚼勁先生 | [Codepen](https://codepen.io/James520284/pen/vYqNXrR) |
| 65 | jerry_66983 | [Codepen](https://codepen.io/Barry-C/pen/rNEOMEW?editors=1100)
| 66 | PoWei#8484 | [Codepen](https://codepen.io/Po-Wei-Lai/pen/OJeybjL)
| 67 | Darius_TszYing| [Codepen](https://codepen.io/bekgnohe-the-selector/pen/xxowgVB?editors=1100)
| 68 | EdHuang | [Codepen](https://codepen.io/yide1986/pen/MWMaJbX) |
| 69 | glen_69515 | [Codepen](https://codepen.io/glenyaochih/pen/zYVGrZK)
| 70 | ninii傳教士 | [Codepen](https://codepen.io/niiniiii/pen/LYKpxaG?editors=1100)
| 71 | 610 | [Codepen](https://codepen.io/YI-LING-LIU/pen/QWXjgMa?editors=1100) |
| 72 | Anna |[Codepen](https://codepen.io/Anna-Teng/pen/zYVvEGw)|
| 73 | Kiwi | [Codepen](https://codepen.io/kiwi1113/pen/oNrjGVm) |
| 74 | Thoeodore0716 | [Codepen](https://codepen.io/GustavoFringgg/pen/vYqNWdG) |
| 75 | Kim | [Codepen](https://codepen.io/kim0101__/pen/ExBjjLd?editors=1100) |
| 76 | gracechiang | [Codepen](https://codepen.io/gracechiang225/pen/zYVvLgg?editors=1100) |
| 77 | Yunya | [Codepen](https://codepen.io/cookie1515/pen/QWXjeJP) |
| 78 | xiang | [Codepen](https://codepen.io/XIANG-XIANG/pen/ExBPaqN) |
| 79 | xcx100 | [Codepen](https://codepen.io/c13026/pen/XWLXKZx) |
| 80 | fan_fan | [Codepen](https://codepen.io/fan1102/pen/gONPwaR) |
| 81 | yaoling.liang | [Codepen](https://codepen.io/Yao-Ling-L-/pen/zYVrKwY) |
| 82 | mindful7755| [Codepen](https://codepen.io/andawu/pen/oNrbYVa?editors=1100) |
| 83 | Steven1220 | [Codepen](https://codepen.io/Steven1220/pen/vYqLWjO) |
| 84 | 咖 | [Codepen](https://codepen.io/daru-Ga/pen/Yzowwyp) |
| 85 | wind | [Codepen](https://codepen.io/wind7y/pen/wvLGavY) |
| 86 | n913239 | [Codepen](https://codepen.io/n913239/pen/ZEdWVym) |
| 87 | Enn | [Codepen](https://codepen.io/enntang/pen/QWXNeRZ) |
| 88 | smallr1229| [Codepen](https://codepen.io/Smallr/pen/jOjWvaQ) |
| 89 | jasonlin | [Codepen](https://codepen.io/gfswkraq-the-reactor/pen/VwJjQmb)|
| 90 | ho_yc | [Codepen](https://codepen.io/Ho_HYC/pen/LYKZwyo)|
| 91 | 地瓜 | [Codepen](https://codepen.io/huangtzuchin/pen/ExBgxZX) |
| 92 | skyderry | [Codepen](https://codepen.io/hvvjvkva-the-sasster/pen/MWMjaYa) |
| 93 | 雪粒 | [Codepen](https://codepen.io/bzykdfhw-the-bashful/pen/dyBpGzx) |
| 94 | Joanne hu | [Codepen](https://codepen.io/nelbabkv-the-flexboxer/pen/JjQRKEO) |
| 95 | zen | [Codepen](https://codepen.io/zen742937/pen/dyBObPo) |
| 96 | Chieh | [Codepen](https://codepen.io/Chieh_/pen/KKjNmVR?editors=1100) |
| 97 | eddiesun0526 | [Codepen](https://codepen.io/Eddie0526/pen/LYKbaMe?editors=1100)|
| 98 | iamcan | [Codepen](https://codepen.io/uhnxswdq-the-typescripter/pen/qBzqejy?editors=1100)|
| 99 | Antonio | [Codepen](https://codepen.io/gwhvusel-the-builder/pen/mdZWoMw)|
| 100 | Toung | [Codepen](https://codepen.io/Toung/pen/MWMmVbP) |
| 101 | qet1717 | [Codepen](https://codepen.io/gwteqexi-the-bold/pen/BagZyqb) |
| 102 | Emma | [Codepen](https://codepen.io/Emma0919/pen/BagZOKr) |
| 103 | Judy | [Codepen](https://codepen.io/yangchi/pen/abgVGae) |
| 104 | 野鴿 | [Codepen](https://codepen.io/HoshinoSyouta/pen/YzoEJxx) |
| 105 | tung | [Codepen](https://codepen.io/ru-ching/pen/GRbQBXw) |
| 106 | ji3di | [Codepen](https://codepen.io/jwuuhtxh-the-builder/pen/gONeJPa) |
| 107 | KOMATSU PEI | [Codepen](https://codepen.io/Komatsu2021/pen/MWMRVWz?editors=1100) |
| 108 | chris | [Codepen](https://codepen.io/chris-chen-the-selector/pen/dyBEYPo) |
| 109 | Lotte | [Codepen](https://codepen.io/hmkdoxuj-the-decoder/pen/qBzGbWr?editors=1100) |
<!--
| No | Discord | [Codepen]() |
--!>