---
# System prepended metadata

title: "\U0001F3C5 Day 16 - flex 多屬性練習"
tags: [網頁切版直播班 - 2025 夏季]

---

# 🏅 Day 16 - flex 多屬性練習

延續昨天的 flex 主題，今天要繼續練習更多 flex 排版技巧。
### flex-direction
定義主軸方向，常用屬性值：
- row：預設值
- row-reverse：反轉 X 軸，即原本 123 區塊排序，轉為 321 區塊排序
- column：將 X 軸與 Y 軸對調

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

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

HTML
```htmlembedded=
<nav class="nav">
    <img src="https://raw.githubusercontent.com/hexschool/2022-web-layout-training/refs/heads/main/normal/hex-logo.png" 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/hexschool/pen/ZExEzyB
-->


回報區
---

|#|Discord|CodePen / 答案|
|:----:|:----:|:----:|
| 1 | 孟 | [Codepen](https://codepen.io/Mengru0503/pen/WbvVdzJ) |
|2|Saika|[Codepen](https://codepen.io/saika4501/pen/emNqyLa)|
|  3  |  Nooooora  |[Codepen](https://codepen.io/Nora-Ch/pen/ByNXJGY) |
|  4  | jchunnn |[Codepen](https://codepen.io/jchunnn/pen/gbpVoZX)|
|  5  | Rogan |[Codepen](https://codepen.io/RoganHsu/pen/azOeEMO)|
|  6  | 西娜 |[Codepen](https://codepen.io/Sheena-the-encoder/pen/NPqQXJB)|
|  7  | Shawn |[Codepen](https://codepen.io/LiShang/pen/XJbvVvJ)|
|  8  | 登登登 |[Codepen](https://codepen.io/Duncanin/pen/xbGvYKV)|
|  9  | 那個貓貓 |[Codepen](https://codepen.io/zorakao/pen/emNqVOO)|
| 10 |  Jenna  |[Codepen](https://codepen.io/abiscc14/pen/emNqVgN) |
|  11  |  RUDY  |[Codepen](https://codepen.io/Rudy-crw/pen/LEVwQxy?editors=1100) |
|  12  |  小懿  |[Codepen](https://codepen.io/YT-the-vuer/pen/VYLoQbr) |
|  13  |  Min  |[Codepen](https://codepen.io/cvqevoxk-the-decoder/pen/xbGvYPq) |
|  14  |  pastor  |[Codepen](https://codepen.io/peter_hung/pen/ZYGgrmO) |
|  15  |  Hao  |[Codepen](https://codepen.io/Howell/pen/wBaVyRL) |
|  16  |  Sid  |[Codepen](https://codepen.io/monkeybear721/pen/vEOodgp) |
|  17  |  kate_bearchou  |[Codepen](https://codepen.io/ydzfqmuh-the-selector/pen/ogXKEdp?editors=1100) |
|  18  |  牛奶嘎  |[Codepen](https://codepen.io/Joyce-Niu/pen/bNdXvdN) |
|  19  |  Jerome  |[Codepen](https://codepen.io/qsc002163/pen/raVXJQ) |
|  20  |  KlausChen  |[Codepen](https://codepen.io/Klaus-Chen/pen/QwbemQd) |
|  21  |  Calvin  |[Codepen](https://codepen.io/CalvinChang/pen/raVXdEr) |
|  22  |  Kiku  |[Codepen](https://codepen.io/Kiku0110/pen/gbpVzYM?editors=1100) |
|  23  |  ja4071  |[Codepen](https://codepen.io/SHAO-L/pen/ByNXxPJ) |
|  24  |  Huang Eagle  |[Codepen](https://codepen.io/YuCi/pen/EajqRRW?editors=1100) |
|  25  |  柔術小子  |[Codepen](https://codepen.io/Li-Lee-Everything-is-PM/pen/JodgZZy) |
|  26  |  老屠  |[Codepen](https://codepen.io/fsgfxvlb-the-selector/pen/QwbexXb) |
| 27  |  Fan  |[Codepen](https://codepen.io/btsihioy-the-reactor/pen/ZYGgjMv?editors=1100) |
|  28  |  cks40660  |[Codepen](https://codepen.io/CKS40660/pen/GgJVXpq) |
|  29  |  平平  |[Codepen](https://codepen.io/ypinpin/pen/XJbvBLP) |
|  30  |  PK  |[Codepen](https://codepen.io/Percy-Ku/pen/raVXZoE) |
|  31  |  Katie  |[Codepen](https://codepen.io/Katiekatiehsu/pen/azOeRvN?editors=1100) |
|  32  |  7Lun  |[Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/WbvVaQL) |
|  33  |  燕  |[Codepen](https://codepen.io/keyrtlij-the-reactor/pen/MYwNPrw) |
|  34  |  社子畢卡索  |[Codepen](https://codepen.io/pen?template=zxGgmVz) |
|  35  |  Chris Wang  |[Codepen](https://codepen.io/Wang-Chris/pen/myJNzZa) |
|  36  |  CBK  |[Codepen](https://codepen.io/BK-C-the-styleful/pen/bNdXQBd) |
|  37  |  kashiwatei  |[Codepen](https://codepen.io/kashiwatei/pen/QwbeJrd?editors=1100) |
|  38  |  Sam.S.T.Y  |[Codepen](https://codepen.io/Sam-Yang-the-animator/pen/MYwNzLr?editors=1100) | -->
|  39  |  Celia  |[Codepen](https://codepen.io/Cindy-Ho/pen/wBaVReq) |
|  40  |  Peggy  |[Codepen](https://codepen.io/Peggy_C/pen/GgJVzJy) |
|  41  |  JiaMori  |[Codepen](https://codepen.io/jiamori/pen/VYLogoB) |
|  42  |  NGNLzenos  |[Codepen](https://codepen.io/xmijbzdb-the-animator/pen/myebbJB) |
|  43  |  Tetsu  |[Codepen](https://codepen.io/ttgchang/pen/yyYBLLO) |
|  44  |  地瓜  |[Codepen](https://codepen.io/ChippyYU/pen/zxvOGZr) |
|  45  |  禹成林  |[Codepen](https://codepen.io/useirin/pen/myebeLN) |
|  46  |  Chia__  |[Codepen](https://codepen.io/Chia-the-encoder/pen/EajqQmg) |
|  47  |  Antonio  |[Codepen](https://codepen.io/gwhvusel-the-builder/pen/bNVbBwx) |
|  48  |  An  |[Codepen](https://codepen.io/bzrpsbjq-the-encoder/pen/zxvOoVZ?editors=1100) |
|  49  |  Leonard  |[Codepen](https://codepen.io/hyyfjqra-the-sans/pen/MYagmzw?editors=1000) |
|  50  |  Elvina  |[Codepen](https://codepen.io/Elvina-the-selector/pen/zxvOJPy?editors=1100) |
|  51  |  Evelyn  |[Codepen](https://codepen.io/ewdyvnmp-the-typescripter/pen/vENYEVL) |
|  52  |  Gloria  |[Codepen](https://codepen.io/ilztzykz-the-decoder/pen/jEbOMxa?editors=1100) |
|  53  |  力文  |[Codepen](https://codepen.io/liwenchiou/pen/RNWwLMZ) |
|  54  |  suemma  |[Codepen](https://codepen.io/suemma/pen/gbaOEdE) |
|  55  |  Doreen翠翠翠  |[Codepen](https://codepen.io/cuei-sian-Wang/pen/vENEEZq?editors=1100) |
|  56  |  YUCCC  |[Codepen](https://codepen.io/taroooo/pen/myeJoMq) |
|  57  |  B  |[Codepen](https://codepen.io/Babel777/pen/bNVVrey) |
|  58  |  Lika  |[Codepen](https://codepen.io/wlyvctff-the-solid/pen/OPyMNqb) |
|  59  |  主委加碼啦幹  |[Codepen](https://codepen.io/popbob-the-bashful/pen/KwdVmym)|
|  60  |  Atian  |[Codepen](https://codepen.io/A-Tian-Chen/pen/bNVEjwr)|
| 61 | water| [Codepen](https://codepen.io/wateruby/pen/jEbWpZp)|
|62|小趴|[Codepen](https://codepen.io/papa2415/pen/myePmxZ)|
|  63  |  tanuki_狸貓  |[Codepen](https://codepen.io/tanuki320/pen/GgpjZpd) |
|  64  |  伊迪  |[Codepen](https://codepen.io/eku10rei/pen/VYvKrGJ?editors=1100) |
|  65  |  KOMATSU PEI  |[Codepen](https://codepen.io/Komatsu2021/pen/KwdNqGW?editors=1100) |
|  66  |  Lucy  |[Codepen](https://codepen.io/Lucytrycode/pen/wBKWero) |
|  67  |  cindy  |[Codepen](https://codepen.io/a50134/pen/empgwqR) | -->
|  68  |  Midy Wu  |[Codepen](https://codepen.io/work-wu/pen/NPGaLJV) |
|  69  |  maerc  |[Codepen](https://codepen.io/Lu-Liangyu/pen/RNWqbbB?editors=1100) |
|  70  |  星雪糖  |[Codepen](https://codepen.io/vfpofbgm-the-scripter/pen/myVPwLK?editors=1100) |



<!-- 快速複製 -->
<!-- |  排序  |  姓名  |[Codepen]() | -->