# 前言
简单介绍 CSS 里的 display: flex 的使用
# 一、display: flex 是什么？
display: flex 对我来说，是一个很好用的前端布局代码 (
可以在前端弹性布局 UI
配合 Chrome 谷歌浏览器 的开发者模式，可以自由实现你所想的页面布局
这是在 Chrome 谷歌浏览器里 开发者模式使用 display: flex 的时候
# 二、简单使用
# flex-direction:
这里是选择弹性布局下的元素显示顺序
1、从左到右 2、从上到下 3、从右到左 4、从下到上
# flex-wrap:
这里是选择弹性布局行的元素开启自动拆行
就是当页面显示此行不是很美观的情况下，开启这个选项，可以美化元素行
# align-content:
这里是选择弹性布局里的元素的水平对齐模式
1、元素居中 2、元素上居中 3、元素下居中 4、元素环绕上下居中 5、元素上下间隔居中 6、元素上下自动间隔居中
# justify-content:
这里是选择弹性布局里的元素的垂直对齐模式
1、元素居中 2、元素左居中 3、元素右居中 4、元素环绕左右居中 5、元素左右间隔居中 6、元素左右自动间隔居中
# align-items:
这里是选择弹性布局里的元素对齐模式
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> |
