CSS3弹性盒布局
1、使用自适应的窗口弹性盒布局
可以使div总宽度等于浏览器宽度，而且可以随着浏览器的改变而改变
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>测试</title> <style> /*弹性盒布局*/ #container{ display: -webkit-box; display: -moz-box; } #left-sidebar{ width: 200px; padding: 20px; background-color: orange; } #content{ -moz-box-flex: 1; -webkit-box-flex: 1; padding: 20px; background-color: yellow; } #right-sidebar{ width: 200px; padding: 20px; background-color: limegreen; } #left-sidebar, #content, #right-sidebar{ box-sizing: border-box; } </style> </head> <body> <div id="container"> <div id="left-sidebar">示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。</div> <div id="content">示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。</div> <div id="right-sidebar">示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。</div> </div> </body> </html>
2、改变元素的显示顺序
box-ordinal-group可以改变各个元素的显示顺序
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>测试</title> <style> /*弹性盒布局*/ #container{ display: -webkit-box; display: -moz-box; } #left-sidebar{ -moz-box-ordinal-group: 2; -webkit-box-ordinal-group: 2; width: 200px; padding: 20px; background-color: orange; } #content{ -moz-box-ordinal-group: 1; -webkit-box-ordinal-group: 1; -moz-box-flex: 1; -webkit-box-flex: 1; padding: 20px; background-color: yellow; } #right-sidebar{ -moz-box-ordinal-group: 3; -webkit-box-ordinal-group: 3; width: 200px; padding: 20px; background-color: limegreen; } #left-sidebar, #content, #right-sidebar{ box-sizing: border-box; } </style> </head> <body> <div id="container"> <div id="left-sidebar">示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。</div> <div id="content">示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。</div> <div id="right-sidebar">示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。</div> </div> </body> </html>
3、改变元素的排列方向
使用box-orient改变多个元素的排列方向
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>测试</title> <style> /*弹性盒布局*/ #container{ display: -webkit-box; display: -moz-box; -moz-box-orient: vertical; -webkit-box-orient: vertical; } #left-sidebar{ -moz-box-ordinal-group: 2; -webkit-box-ordinal-group: 2; width: 200px; padding: 20px; background-color: orange; } #content{ -moz-box-ordinal-group: 1; -webkit-box-ordinal-group: 1; -moz-box-flex: 1; -webkit-box-flex: 1; padding: 20px; background-color: yellow; } #right-sidebar{ -moz-box-ordinal-group: 3; -webkit-box-ordinal-group: 3; width: 200px; padding: 20px; background-color: limegreen; } #left-sidebar, #content, #right-sidebar{ box-sizing: border-box; } </style> </head> <body> <div id="container"> <div id="left-sidebar">示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。</div> <div id="content">示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。</div> <div id="right-sidebar">示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。</div> </div> </body> </html>
4、元素宽度与高度的自适应
虽然使用盒布局时，元素的高度与宽度具有了一定的适应性，但是容器中总还是会留出一大片空白区域
5、使用弹性盒布局来消除空白
使用弹性盒布局可以消除盒布局残留的空白问题
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>测试</title> <style> *{ box-sizing: border-box; margin: 0; } html, body{ width: 100%; height: 100%; } /*弹性盒布局*/ #container{ display: -webkit-box; display: -moz-box; -moz-box-orient: vertical; -webkit-box-orient: vertical; border: 2px solid black; width: 100%; height: 100%; } #left-sidebar{ -moz-box-ordinal-group: 2; -webkit-box-ordinal-group: 2; width: 200px; padding: 20px; background-color: orange; } #content{ -moz-box-ordinal-group: 1; -webkit-box-ordinal-group: 1; -moz-box-flex: 1; -webkit-box-flex: 1; padding: 20px; background-color: yellow; } #right-sidebar{ -moz-box-ordinal-group: 3; -webkit-box-ordinal-group: 3; width: 200px; padding: 20px; background-color: limegreen; } </style> </head> <body> <div id="container"> <div id="left-sidebar">示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。</div> <div id="content">示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。</div> <div id="right-sidebar">示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。</div> </div> </body> </html>
6、对多个元素使用box-flex属性
如果每个div元素都有box-flex,那么每个元素的宽高等于容器宽高的1/n.容器的空白部分根据box-flex的属性值进行分配
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>测试</title> <style> *{ box-sizing: border-box; margin: 0; } html, body{ width: 100%; height: 100%; } /*弹性盒布局*/ #container{ display: -webkit-box; display: -moz-box; -moz-box-orient: vertical; -webkit-box-orient: vertical; border: 2px solid black; width: 100%; height: 100%; } #left-sidebar{ -moz-box-ordinal-group: 2; -webkit-box-ordinal-group: 2; -moz-box-flex: 1; -webkit-box-flex: 1; padding: 20px; background-color: orange; } #content{ -moz-box-ordinal-group: 1; -webkit-box-ordinal-group: 1; -moz-box-flex: 2; -webkit-box-flex: 2; padding: 20px; background-color: yellow; } #right-sidebar{ -moz-box-ordinal-group: 3; -webkit-box-ordinal-group: 3; -moz-box-flex: 1; -webkit-box-flex: 1; padding: 20px; background-color: limegreen; } </style> </head> <body> <div id="container"> <div id="left-sidebar">示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。</div> <div id="content">示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。</div> <div id="right-sidebar">示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。</div> </div> </body> </html>
7、指定水平方向与垂直方向的对齐方式
可以使用box-pack属性及box-align属性来指定元素中文字、图片水平或垂直方向的对齐方式
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>测试</title> <style> *{ box-sizing: border-box; margin: 0; } html, body{ width: 100%; height: 100%; } /*弹性盒布局*/ #container{ display: -webkit-box; display: -moz-box; -moz-box-align: center; -webkit-box-align: center; -moz-box-pack: center; -webkit-box-pack: center; -moz-box-orient: vertical; -webkit-box-orient: vertical; border: 2px solid black; width: 50%; height: 50%; } #content{ display: -webkit-box; display: -moz-box; -moz-box-align: center; -webkit-box-align: center; -moz-box-pack: center; -webkit-box-pack: center; -moz-box-orient: vertical; -webkit-box-orient: vertical; width: 50%; height: 50%; padding: 20px; background-color: yellow; } </style> </head> <body> <div id="container"> <div id="content">示例文字。</div> </div> </body> </html>
