一、flex盒子模型
Flex弹性布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。flex中的属性和float属性有所不同，flex提供了更加灵活的属性供给大家使用，而float属性较为死板，所以现在在前端设计中flex占据更为主导的位置，也能够应对出现的各种情况。
align-items：定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
flex-start:顶部对齐
flex-end:底部对齐
center：中间对齐
baseline：底部的顶部对齐
stretch：伸展以适合对齐
justify-content:设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式
flex-start：盒子的主轴顶部对齐
flex-end:尾部对齐
center:中间对齐
space-between：空格两端对齐
space-around:空格对齐
align-content ：在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）
flex-start
flex-end
center
space-between
space-around
align-content由于和justify-content的解释大同小异，大家可以通过下面附代码实现功能看到效果
<head> <meta charset="utf-8"> <title>flex</title> <style> div#container{ border:1px solid black; padding:5px; width:600px; height:140px; display:flex; } div>div{ border:1px solid #aaf; padding:5px; width:100px; } div#container1{ border:1px solid black; padding:5px; width:600px; height:140px; display:flex; } div#container2{ border:1px solid black; padding:5px; width:350px; height:160px; display:flex; flex-wrap:wrap; } table{ width:400px; border:1px solid black; } td{ background-color:#ccc; border:1px solid black; } </style> </head> <body> <!--flex的应用--> <div id="container"> <div style="font-size:12px;">栏目一</div> <div style="font-size:24px;">栏目二</div> <div style="font-size:36px;">栏目三</div> </div> <button onclick="change(this.innerHTML);">flex-start</button> <button onclick="change(this.innerHTML);">flex-end</button> <button onclick="change(this.innerHTML);">center</button> <button onclick="change(this.innerHTML);">baseline</button> <button onclick="change(this.innerHTML);">stretch</button> <hr> <div id="container1"> <div style="font-size:12px;">栏目一</div> <div style="font-size:24px;">栏目二</div> <div style="font-size:36px;">栏目三</div> </div> <button onclick="change1(this.innerHTML);">flex-start</button> <button onclick="change1(this.innerHTML);">flex-end</button> <button onclick="change1(this.innerHTML);">center</button> <button onclick="change1(this.innerHTML);">space-between</button> <button onclick="change1(this.innerHTML);">space-around</button> <hr> <div id="container2"> <div >栏目一</div> <div >栏目二</div> <div >栏目三</div> <div >栏目四</div> <div >栏目五</div> <div >栏目六</div> <div >栏目七</div> <div >栏目八</div> <div >栏目九</div> </div> <button onclick="change2(this.innerHTML);">flex-start</button> <button onclick="change2(this.innerHTML);">flex-end</button> <button onclick="change2(this.innerHTML);">center</button> <button onclick="change2(this.innerHTML);">space-between</button> <button onclick="change2(this.innerHTML);">space-around</button> <hr> <hr> <!--table的属性应用，p308--> <p>表格的单元格边框合并在一起，看起来分割线为单线<br> border-collapse:collapse</p> <table style="border-collapse:collapse;"> <tr> <td>疯狂java讲义</td> <td>轻量级java</td> </tr> <tr> <td>疯狂java讲义</td> <td>轻量级java</td> </tr> </table> <p>表格的单元格边框分开，看起来分割线为双线,并隐藏空格的边框线</br> border-collapse:seperate;empty-cells:hide:<p> <table style="border-collapse:seperate;empty-cells:hide;"> <tr> <td>疯狂java讲义1111</td> <td>轻量级java</td> </tr> <tr> <td>疯狂java讲义</td> <td></td> </tr> </table> <p>表格的单元格边框分开,看起来表格分割线为双线,并设置两个单元格的间距<br> border-collapse:seperate;border-spacing:20px;</p> <table style="border-collapse:seperate;border-spacing:20px;"> <tr> <td>疯狂java讲义</td> <td>轻量级java</td> </tr> <tr> <td>疯狂java讲义</td> <td>轻量级java</td> </tr> </table> <hr> <!--光标--> <div style="display:inline-block;border:1px solid black;width:160px;height:70px;cursor:all-scroll;">十字箭头光标</div> <div style="display:inline-block;border:1px solid black;width:160px;height:70px;cursor:col-resize;">水平拖动线光标</div> <div style="display:inline-block;border:1px solid black;width:160px;height:70px;cursor:crosshair;">十字线光标</div> <div style="display:inline-block;border:1px solid black;width:160px;height:70px;cursor:move;">代表移动十字箭头光标</div> <div style="display:inline-block;border:1px solid black;width:160px;height:70px;cursor:help;">带问号的箭头光标</div> <div style="display:inline-block;border:1px solid black;width:160px;height:70px;cursor:no-drop;">禁止光标</div> <div style="display:inline-block;border:1px solid black;width:160px;height:70px;cursor:not-allowed;">禁止光标</div> <div style="display:inline-block;border:1px solid black;width:160px;height:70px;cursor:pointer;">手形光标</div> <div style="display:inline-block;border:1px solid black;width:160px;height:70px;cursor:progress;">带进度环的箭头光标</div> <div style="display:inline-block;border:1px solid black;width:160px;height:70px;cursor:row-resize;">垂直拖动光标</div> <div style="display:inline-block;border:1px solid black;width:160px;height:70px;cursor:text;">文本编辑光标</div> <div style="display:inline-block;border:1px solid black;width:160px;height:70px;cursor:vertical-text;">垂直文本编辑光标</div> <div style="display:inline-block;border:1px solid black;width:160px;height:70px;cursor:wait;">进度环光标</div> <div style="display:inline-block;border:1px solid black;width:160px;height:70px;cursor:n-resize;">可向上拖动的光标</div> <div style="display:inline-block;border:1px solid black;width:160px;height:70px;cursor:ne-resize;">上、右可拖动光标</div> <div style="display:inline-block;border:1px solid black;width:160px;height:70px;cursor:se-resize;">下、右可拖动光标</div> </body> <script> function change(val){ document.getElementById('container').style.alignItems = val; } function change1(val){ document.getElementById('container1').style.justifyContent = val; } function change2(va){ document.getElementById('container2').style.alignContent = va; } </script>
740
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
