---
# System prepended metadata

title: "全職鬥士1組-\U0001F3C5第二週小組任務筆記"

---

# 全職鬥士1組-🏅第二週小組任務筆記
# 第二週小組作業討論

## 任務一：玩 Flexbox 遊戲（Flex 青蛙 & Flex pirate）

![第1-10關](https://i.imgur.com/TCLS6Cv.png =600x)

![第15-24關](https://i.imgur.com/TYm0BMv.png =600x)

![挑戰完成](https://i.imgur.com/8lcmR1y.png =600x)

:memo:參考：
[圖解：CSS Flex 屬性一點也不難](https://wcc723.github.io/css/2017/07/21/css-flex/)

<br>

## 任務二：幫實習生復原完美六角 LOGO
題目：[Codepen](https://codepen.io/liao/pen/qBObLvR?editors=1100)
### 修改限制
* 可以修改 HTML li 裡面的圖片路徑
* CSS 只能在既有的 ul 與 img 標籤加上語法，不能額外加上選擇器

:memo:討論：修改&lt;li&gt;順序後，在外容器&lt;ul&gt;使用 `flex-wrap:wrap` 讓內元件&lt;li&gt;往下移，之後在&lt;img&gt;下 `display:block` 清除底部空白。
我們討論了三種方式：
[Jimmy](https://codepen.io/Jimmy_Wu/pen/gOareGO)｜[長庚](https://codepen.io/dannyliume/pen/bGVeJrW)｜[YU](https://codepen.io/YCH06/pen/wvKWRPd)
<br>

## 任務三：討論第二週版型該怎麼做
每個人輪流用小畫家畫框線，討論用什麼 HTML 標籤以及可以怎麼排版。

![作業版型規劃討論](https://i.imgur.com/hCbdCCv.jpg =600x)

<br>

## 其他討論
* &lt;img&gt;在一般狀況下是行內元素（inline）。如果外容器下`display: flex`，內容器的&lt;img&gt;會變成區塊元素（block），[Codepen 範例](https://codepen.io/YCH06/pen/zYvKrxa?editors=1100)
* 在 Chrome 瀏覽器中開啟開發者模式，點選想要的元素後，可以在 Compuded 中看到其所有 CSS 屬性。範例圖如下：

![](https://i.imgur.com/xyA51rH.png)
<br>

## 助教回覆
https://courses.hexschool.com/courses/808825/lectures/15831295
哈囉，全職鬥士 1 組 
我是六角助教，穎旻

恭喜過關！
任務二的連結一就可以摟～

你們也好用心討論，這週作業加油
已經幫你們在 excel 上標示完成了：D
<!-- ![](https://i.imgur.com/TMIbNqg.png =600x)
![](https://i.imgur.com/8xPrYX6.png =600x)
![](https://i.imgur.com/pTznUol.png =600x)
![](https://i.imgur.com/d89ENOI.png =600x)
![](https://i.imgur.com/y12xJX8.png =600x)
![](https://i.imgur.com/WW6XtSq.png =600x)
![](https://i.imgur.com/iINOkdI.png =600x)
![](https://i.imgur.com/80TybNb.png =600x)
![](https://i.imgur.com/mPFd19g.png =600x)
![](https://i.imgur.com/BKyDzme.png =600x)
![](https://i.imgur.com/TYm0BMv.png =600x)
![](https://i.imgur.com/8lcmR1y.png =600x)
![](https://i.imgur.com/NchvZ2T.png =600x) -->







