# 全職鬥士1組-🏅第二週小組任務筆記
# 第二週小組作業討論
## 任務一：玩 Flexbox 遊戲（Flex 青蛙 & Flex pirate）
: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:討論：修改<li>順序後，在外容器<ul>使用 `flex-wrap:wrap` 讓內元件<li>往下移，之後在<img>下 `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 標籤以及可以怎麼排版。
<br>
## 其他討論
* <img>在一般狀況下是行內元素（inline）。如果外容器下`display: flex`，內容器的<img>會變成區塊元素（block），[Codepen 範例](https://codepen.io/YCH06/pen/zYvKrxa?editors=1100)
* 在 Chrome 瀏覽器中開啟開發者模式，點選想要的元素後，可以在 Compuded 中看到其所有 CSS 屬性。範例圖如下：
<br>
## 助教回覆
https://courses.hexschool.com/courses/808825/lectures/15831295
哈囉，全職鬥士 1 組
我是六角助教，穎旻
恭喜過關！
任務二的連結一就可以摟～
你們也好用心討論，這週作業加油
已經幫你們在 excel 上標示完成了：D
<!-- 
 -->
{"metaMigratedAt":"2023-06-15T06:53:21.079Z","metaMigratedFrom":"Content","title":"全職鬥士1組-🏅第二週小組任務筆記","breaks":true,"contributors":"[{\"id\":\"ce0e7d0a-43cf-4d20-a832-b24fdcc06909\",\"add\":1962,\"del\":1642},{\"id\":\"6c0afdea-0546-4fd3-8eab-0fdf7fe6e01a\",\"add\":1090,\"del\":5},{\"id\":\"eb8d9d49-fa3a-4ef0-addb-8ba8b21d37a7\",\"add\":453,\"del\":0}]"}