---
# System prepended metadata

title: DAY8 - FLEX 再包 FLEX 排版技巧
tags: ['Re:0 前端工程師之路 - HTML CSS 篇章 / FLEX 篇']

---

# DAY8 - FLEX 再包 FLEX 排版技巧

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

- 於 HTML 元件區寫：

```
border: 1px solid #000;
```

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

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


# 結構設計：

```
<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;
}
```

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

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


- 下 align-items 語法:

  
  
  
```
.header {
    align-items: center;
}
```

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

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



### 於 ul.menu 下 display: flex

```
.menu {
    display: flex;
}
```

- menu 清單並排成功了!

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


---


### 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 給移除掉了
  結構完成後，就不需要這段語法。

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

### finished:

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


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

