Flexbox mit aside

Hier ein Beispiel wie man Flexbox Layout umsetzten kann

Der hier verwendete Code

<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <title>Flexboxen -Layout</title> <style> #headerlinks,#headermitte,#headerrechts{ flex:1; border:1px solid red; } #suche{ margin-top:20px; height:30px; width:200px; font-size:26px; } *{ margin: 0px; padding: 0px; } body{ background: #E6E6E6; border: solid 3px black; display:flex; flex-direction:column; } p { font-family: Helvetica, Avenir, Arial, sans-serif; font-size: 11px; } header{ width: 100%; background: #ABABAB; border: solid 2px blue; text-align:center; display:flex; } header p{ font-size:30px; } #wrapper{ display:flex; } #left{ flex:1; padding-top:30px; border: dotted 2px black; background: #D4D4D4; text-align:center; } main{ flex:4; border: solid 2px blue; background: #D1EEEE; } main p{ font-size:100px; text-align:center; } #right{ flex:1; background: white; border: dotted 2px black; background: lightgreen; text-align:center; padding-top:30px; } ul { list-style-type: none; list-style-position: inside; font-family: Helvetiva, Avenir, Arial sans-serif; font-size: 12px; margin-left: 0em; padding-left: 0em; } footer{ background: #ABABAB; border: solid 2px blue; text-align:center; } footer p{ font-size:30px; } </style> </head> <body> <header><div id="headerlinks"><img src="https://gravatar.com/avatar/05985c88be5fa0d7f448e068960452b9?s=80&d=https://codepen.io/assets/avatars/user-avatar-80x80-bdcd44a3bfb9a5fd01eb8b86f9e033fa1a9897c3a15b33adfc2649a002dab1b6.png" id="logo"></div><div id="headermitte"> <p> header </p></div><div id="headerrechts"><input type="text" id="suche" placeholder="suche.."></div></header> <div id="wrapper"> <aside id="left"> <ul> <li> <p>Navigation 1</p> </li> <li> <p>Navigation 2</p> </li> <li> <p>Navigation 3</p> </li> </ul> </aside> <main><p>Mitte</p></main> <aside id="right"> <img src="https://gravatar.com/avatar/05985c88be5fa0d7f448e068960452b9?s=80&d=https://codepen.io/assets/avatars/user-avatar-80x80-bdcd44a3bfb9a5fd01eb8b86f9e033fa1a9897c3a15b33adfc2649a002dab1b6.png" alt="placeholder" width="150" height="150" style="border: 0px; vertical-align: middle;" /> <br /> <img src="https://gravatar.com/avatar/05985c88be5fa0d7f448e068960452b9?s=80&d=https://codepen.io/assets/avatars/user-avatar-80x80-bdcd44a3bfb9a5fd01eb8b86f9e033fa1a9897c3a15b33adfc2649a002dab1b6.png" alt="placeholder" width="150" height="150" style="border: 0px; vertical-align: middle;" /> </aside> </div> <footer> <p> Fußzeile </p></footer> </body> </html>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!