# DAY8 - FLEX 再包 FLEX 排版技巧

### 開發技巧，善用 `border` 抓取現況元件寬高:

- 於 HTML 元件區寫：

border: 1px solid #000;

- 可使元件出現外框，以便 debug CSS


# 結構設計：

<div class="header">
  <a class="logo" target="_blank" href="https://www.hexschool.com/">
    <img src="https://raw.githubusercontent.com/hexschool/HTMLHWSource/master/singlePage/logo.png" alt="hexschool" >
  </a>
  <ul class="menu">
    <li><a href="#">首頁</a></li>
    <li><a href="#">關於六角</a></li>
    <li><a href="#">問與答</a></li>
  </ul>
</div>

// CSS:

.header {
  display: flex;
  justify-content: space-between;
  width: 550px;
  margin: 0 auto;
  border: 1px solid #000;
  padding: 20px;
}

.logo, .menu {
  border: 1px solid #000;
}

### 首先，使交錯軸內元件「置中」:


- 下 align-items 語法:

.header {
    align-items: center;
}

- 下圖可以發現到，menu 的外框線縮小範圍了。確實置中。


### 於 ul.menu 下 display: flex

.menu {
    display: flex;
}

- menu 清單並排成功了!


---

### flex 內包 flex 效果做到這邊就成功了，剩下就是細節調整。

.header {
  background: #004466;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 550px;
  margin: 0 auto;
  border: 1px solid #000;
  padding: 20px;
}

.logo, .menu {
  border: 1px solid #000;
}

.menu {
  display: flex;
}

.menu li {
  text-align: center;
  border: 1px solid #000;
  width: 100px;
}

.menu a {
  text-decoration: none;
  color: blue;
  display: block;
  background: #00ffa2;
  padding-top: 10px;
  padding-bottom: 10px;
} 

.menu a:hover {
  background: blue;
  color: #00ffa2;
}

- 成果圖:

這邊的話，剩下就能夠把所有的 boredr 給移除掉了
結構完成後，就不需要這段語法。


### finished:


###### tags: `Re:0 前端工程師之路 - HTML CSS 篇章 / FLEX 篇`