【筆記】學習CSS佈局18——flexbox
阿新 • • 發佈：2018-12-01
新的 flexbox 佈局模式被用來重新定義CSS中的佈局方式。
使用flexbox你還可以做的更多；這裡只是一些讓你瞭解概念的例子：
使用 Flexbox 的簡單佈局
程式碼例項：
<!DOCTYPE html> <html> <head> <style type="text/css"> .container { display:-webkit-flex; display: flex; border:3px solid #6ac5ac; } nav { width:200px; border:3px solid #d64078; } .flex_column { -webkit-flex:1; flex:1; border:3px solid #d64078; } section { border:3px solid #fdc72f; } </style> </head> <body> <div class="container"> <nav> <ul> <li><a href="#">檔案</a></li> <li><a href="#">編輯</a></li> <li><a href="#">選擇</a></li> <li><a href="#">查詢</a></li> <li><a href="#">檢視</a></li> <li><a href="#">工具</a></li> </ul> </nav> <div class="flex_column"> <section> Flexbox好容易使用！ </section> <section> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. </section> </div> </div> </body> </html>
效果圖如下：
使用 Flexbox 的牛逼佈局
程式碼例項：
<!DOCTYPE html> <html> <head> <style type="text/css"> .container { display:-webkit-flex; display:flex; border:3px solid #6ac5ac; } .initial { -webkit-flex:initial; flex:initial; width:200px; min-width:100px; border:3px solid #fdc72f; } .none { -webkit-flex:none; flex:none; width:200px; border:3px solid #fdc72f; } .flex1 { -webkit-flex:1; flex:1; border:3px solid #fdc72f; } .flex2 { -webkit-flex:2; flex:2; border:3px solid #fdc72f; } </style> </head> <body> <div class="container"> <div class="initial"> 空間足夠的時候，我的寬度是200px，如果空間不足，我會變窄到100px，但不會再窄了。 </div> <div class="none"> 無論視窗如何變化，我的寬度一直是200px。 </div> <div class="flex1"> 我會佔滿剩餘寬度的1/3。 </div> <div class="flex2"> 我會佔滿剩餘寬度的2/3。 </div> </div> </body> </html>
效果圖如下：
使用 Flexbox 的居中佈局
程式碼例項：
<!DOCTYPE html> <html> <head> <style type="text/css"> .vertical-container { height:300px; display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; -webkit-justify-content:center; justify-content:center; border:3px solid #6ac5ac; } .inner { border:3px solid #fdc72f; } </style> </head> <body> <div class="vertical-container"> <div class="inner"> CSS裡總算是有了一種簡單的垂直居中佈局的方法了！ </div> </div> </body> </html>
效果圖如下：
