# 基本 Flex 應用 ![](https://i.imgur.com/LMbe5BT.png) ### html ``` <body> <div class="container"> <header> <img src="starburst.jpg" alt="picture"> <nav> <ul> <li>導航1</li> <li>導航2</li> <li>導航3</li> </ul> </nav> <button>按鈕1</button> </header> <div class="wrapper"> <aside> aside </aside> <section> section </section> </div> <footer> footer </footer> </div> </body> ``` ### css ``` body { margin: 15px; } .container { display: flex; flex-direction: column; font-size: 30px; } header { display: flex; justify-content: space-between; align-items: center; border: 2px dashed black; border-radius: 10px; padding:0 25px; } header img{ width: 50px; height: 50px; margin-right: 20px; } header nav { margin-right: auto; } header nav ul { display: flex; list-style-type: none; padding-left: 0px; } header nav ul > li:not(:last-child) { margin-right: 15px; } button { font-size: large; background-color: deepskyblue; padding: 5px; border:3px solid deepskyblue; border-radius: 3px; } .wrapper { display: flex; margin: 20px 0; } .wrapper > aside,section { display: flex; justify-content: center; align-items: center; } .wrapper aside { flex: 1; height: 1000px; border: 2px dashed black; border-radius: 10px; } .wrapper section { flex: 3; height: 1000px; margin-left: 20px; border: 2px dashed black; border-radius: 10px; } footer { display: flex; height: 100px; border: 2px dashed black; border-radius: 10px; justify-content: center; align-items: center; } ```