垂直佈局彈性盒模型
阿新 • • 發佈：2018-12-21
1. 垂直方向的佈局 <!DOCTYPE html> <html lang="en"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="description" content="" /> <title>彈性盒模型</title> <style> *{ margin:0;padding:0; } #content{ position:relative; width:100%; height:100%; border:1px solid red; display:flex; flex-wrap:wrap; justify-content:space-around; align-items:center; } .div{ width:100%; height:100px; border:1px solid black; } #div2{ height:1000px;border:10px solid blue; } .middle{ } </style> </head> <body> <div id='content'> <div class="div" id='div1'></div> <div class="div" id='div2'> <div class='middle'></div> </div> <div class="div" id='div3'></div> </div> </body> </html> 2. 橫向的左右中的中間的佈局 <!DOCTYPE html> <html lang="en"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="description" content="" /> <title>ETUI2.2 </title> <style> #content{ position:relative; width:100%; height:200px; border:1px solid red; display:flex; flex-wrap:wrap; justify-content:space-around; align-items:center; } span{ width:30%; height:50px; border:1px solid black; } </style> </head> <body> <div id='content'> <span></span> <span></span> </div> </body> </html>