布局方式-flex布局
阿新 • • 發佈：2019-02-03
contain none 寬度 one 指定 body flexbox ont src 1、彈性盒子
2、盒子本來就是並列的
3、指定寬度即可
這個是一整塊占據了800像素，如果將子元素多加幾塊
<style> .container { width: 800px; height: 200px; display: flex; border: 1px solid black; } .flex { background: red; margin: 5px; flex: 1; } </style> <body> <div class="container"> <divclass="flex"> flex </div> </div> </body>
這個是一整塊占據了800像素，如果將子元素多加幾塊
<div class="container"> <div class="flex"> flex </div> <div class="flex"> flex </div> <div class="flex"> flex </div> <div class="flex"> flex </div> <div class="flex"> flex </div> <div class="flex"> flex </div> </div>
會發現都被平分了有木有。
如果將某一個改成flex為2。會發現占了兩分，其它多平分。也就是其中一份是2，2/7。其它都是1，1/7。
如果要某一個固定的高度。我們設置為50px。flex:none。 可以看到固定的寬度，其余的再進行平分，就是flex為2的占（800-50）／6,2/6。其它都是1，1/6。
普通布局
<style> .container { width: 800px; height: 200px; display: flex; } .left { background: red; width: 200px; } .right { background: blue; flex: 1; } </style> <body> <div class="container"> <div class="left"> 左 </div> <div class="right"> 右 </div> </div> </body>
<style media="screen"> html *{ padding: 0; margin: 0; } .layout article div{ min-height: 100px; } </style> <body> <section class="layout flexbox"> <style> .layout.flexbox .left-center-right{ display: flex; } .layout.flexbox .left{ width: 300px; background: red; } .layout.flexbox .center{ flex: 1; background: yellow; } .layout.flexbox .right{ width: 300px; background: blue; } </style> <article class="left-center-right"> <div class="left"></div> <div class="center"> <h2>flexbox</h2> </div> <div class="right"></div> </article> </section> </body>
布局方式-flex布局