简单介绍 CSS 里的 display: flex 的使用
display: flex 对我来说,是一个很好用的前端布局代码(
可以在前端弹性布局UI
配合 Chrome 谷歌浏览器 的开发者模式,可以自由实现你所想的页面布局
这是在 Chrome 谷歌浏览器里 开发者模式使用 display: flex 的时候
这里是选择弹性布局下的元素显示顺序
1、从左到右 2、从上到下 3、从右到左 4、从下到上
这里是选择弹性布局行的元素开启自动拆行
就是当页面显示此行不是很美观的情况下,开启这个选项,可以美化元素行
这里是选择弹性布局里的元素的水平对齐模式
1、元素居中 2、元素上居中 3、元素下居中 4、元素环绕上下居中 5、元素上下间隔居中 6、元素上下自动间隔居中
这里是选择弹性布局里的元素的垂直对齐模式
1、元素居中 2、元素左居中 3、元素右居中 4、元素环绕左右居中 5、元素左右间隔居中 6、元素左右自动间隔居中
这里是选择弹性布局里的元素对齐模式
1、水平居中 2、上对齐 3、下对齐 4、从上到下延伸 5、文字对齐
通过 display: flex 可以快速定义一个页面的UI样式
例子:
一个后台页面,用上 display: flex 很简单就实现了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Test</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> </head> <body> <div class="main"> <div class="manage-nav bg-primary"> </div> <div class="main-pane"> <div class="user-nav"> </div> <div class="info-pane"> </div> </div> </div> </body> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> <script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> </html> <style> *{ margin:0; padding: 0; outline: none; } html,body,.main{ width: 100%; height: 100%; } /* 主页面样式 */ .main{ display: flex; } /* 侧边导航栏样式 */ .manage-nav{ min-width: 256px; max-width: 256px; height: 100%; } /* 面板样式 */ .main-pane{ width: 100%; height: 100%; } /* 用户导航栏样式 */ .user-nav{ min-width: 100px; height: 64px; background-color: rgb(248, 248, 248); } /* 信息面板样式 */ .info-pane{ min-width: calc(100% - 256px); min-height: calc(100% - 64px); background-color: white; } </style>