---
# System prepended metadata

title: Flex 裡頭還可以包 Flex - 圖解教學
tags: [css]

---

---
tags: css
---


# Flex 裡頭還可以包 Flex - 圖解教學

* 在外層flex包內層的概念

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



> HTML 架構

```htmlembedded=
<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="all.css">
        <link rel="stylesheet" href="reset.css">
        <title>Document</title>
    </head>

    <body>
        <div class="header">
            <a href="#" class="logo"><img
                    src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png" alt=""></a>
            <ul class="menu">
                <li><a href="#">EN</a></li>
                <li><a href="#">中</a></li>
            </ul>
        </div>
    </body>

</html>
```

>css寫法

```css=
*{
    outline:1px  solid #000;
}

.header{
    width: 750px;
    margin: 0 auto;
    border: 1px solid #000;
    padding: 20px;
    /* display: flex; 並排 */
    display: flex;
    /* 由中間左右分開 */
    justify-content : space-between;
    /* 上下交錯置中 */
    align-items: center;    
}
.menu{
  display: flex;
}
.menu li{
  width: 80px;
  /* 上下置中 */
  text-align: center;
}

.menu li a{
    /* 轉區塊元素 */
    display: block;
    background: cornflowerblue;
    /* 拿掉下底線 */
    text-decoration: none;
    padding-top: 10px;
    padding-bottom: 10px;
}
.logo , menu{
     border: 1px solid #000;
}
```

* 完成後範例
* 
![](https://i.imgur.com/o1uzRhN.png)
