--- 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)