首先是移动像素,对于px应该都不会觉得陌生,这是css针对浏览器设计的一种逻辑像素,是浏览器使用的抽象单位!dp、pt,江湖人称设备无关像素,也就是设备的物理像素!而dpr,设备像素的缩放比,是px和dp联系的桥梁!有怎么一个计算公式1px=dpr*dpr*dp。 <!DOCTYPE html> <html> <head> <title>弹性布局Flexbox</title> <meta charset="utf8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> <style type="text/css"> html,body{ padding: 0; margin: 0; } .flexbox{ display: flex; display: -webkit-flex; justify-content:center; align-items:center; color:#fff;} .space-between{ justify-content:space-between; } .space-around{ justify-content:space-around; } .flexbox > div{ height: 200px; } .flex-1{ flex:1; -webkit-flex:1; text-align: center; } .flex-2{ flex:2; -webkit-flex:2;text-align: center; } .flex-3{ flex:3; -webkit-flex:3;text-align: center; } .red{ background: #f05b72; } .green{background: #b2d235;} .blue{ background: #2a5caa; } .mt20{ margin-top: 20px; } .flex-row{ flex-direction:row; } .flex-row-reverse{ flex-direction:row-reverse; } .flex-column{ flex-direction:column; } .flex-column-reverse{ flex-direction:column-reverse; } .flex-wrap-nowrap{ flex-wrap:nowrap; } .flex-wrap-wrap{ flex-wrap:wrap; /*wrap-reverse*/ } </style> </head> <body> <div>[flex-direction:row; ]</div> <div class="flexbox flex-row"> <div class="red flex-1">flex-1</div> <div class="green flex-2">flex-2</div> <div class="blue flex-3">flex-3</div> </div> <div class="mt20">[flex-direction:row-reverse; ]</div> <div class="flexbox flex-row-reverse "> <div class="red flex-1">flex-1</div> <div class="green flex-2">flex-2</div> <div class="blue flex-3">flex-3</div> </div> <div class="mt20">[flex-direction:column;]</div> <div class="flexbox flex-column"> <div class="red" style="width:100%;">flex-1</div> <div class="green" style="width:100%;">flex-2</div> <div class="blue" style="width:100%;">flex-3</div> </div> <div class='mt20'>[flex-direction:column-reverse;]</div> <div class="flexbox flex-column-reverse "> <div class="red" style="width:100%;">flex-1</div> <div class="green" style="width:100%;">flex-2</div> <div class="blue" style="width:100%;">flex-3</div> </div> <div class='mt20'>[flex-wrap:nowrap;]</div> <div class="flexbox flex-wrap-nowrap "> <div class="red" style="width:600px;">width:600px;</div> <div class="green" style="width:800px;">width:800px;</div> <div class="blue" style="width:500px">width:500px</div> </div> <div class='mt20'>[flex-wrap:wrap;]</div> <div class="flexbox flex-wrap-wrap "> <div class="red" style="width:600px;">width:600px;</div> <div class="green" style="width:800px;">width:800px;</div> <div class="blue" style="width:500px">width:500px</div> </div> <div class='mt20'>[justify-content:space-between; ]</div> <div class="flexbox mt20 space-between"> <div class="red" style="width:500px;">width:500px;</div> <div class="red" style="width:500px;">width:500px;</div> </div> <div class='mt20'>[justify-content:space-around; ]</div> <div class="flexbox mt20 space-around"> <div class="red" style="width:500px;">width:500px;</div> <div class="red" style="width:500px;">width:500px;</div> </div> <div class="flexbox mt20"> <div class="red" style="width:100px;margin-right:20px;">margin-right:20px;</div> <div class="green flex-1">flex-1</div> <div class="blue"style="width:100px;margin-left:20px;">margin-left:20px;</div> </div> <div class="flexbox mt20"> <div class="red" style="width:100px;margin-right:20px;">margin-right:20px;</div> <div class="green flex-1">flex-1</div> <div class="blue"style="width:100px;margin-left:20px;">margin-left:20px;</div> </div> </body> </html>
|