flex弹性布局的简单使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
</style>
</head>
<body>
<ul>
<li>首页</li>
<li>公告</li>
<li>热点</li>
<li>联系</li>
</ul>
</body>
</html>
由于li标签是块级元素，所以浏览器显示如下：
那么如何让它变成一行呢，可以使用浮动进行设置，但是这里使用flex弹性盒子进行布局。
为上面的style标签下添加如下CSS代码如下：
ul {
/* 让父级容器添加“display: flex;”变成弹性盒子 */
/* 让行级元素变成块级元素 */
display: flex;
/* 让父级容器添加排列方向，默认是水平排列，row表示水平方向排列，column表示垂直方向排列 */
flex-direction: row;
}
其中“display:flex;"是为要进行布局的元素的父级元素添加的，比如说这里要布局li元素，所以就给ul元素添加flex即可。
而”flex-direction:row"表示让flex布局下的子元素水平排列布局，而“flex-direction:column"表示让子级元素垂直排列，比使用浮动更简单。
等分布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
ul {
/* 使用flex弹性盒子布局 */
display: flex;
}
li {
/* 使每个li等分宽度 */
flex: 1;
border: 1px solid red;
}
</style>
</head>
<body>
<ul>
<li class="li1">首页</li>
<li class="li2">公告</li>
<li class="li3">热点</li>
<li class="li4">联系</li>
</ul>
</body>
</html>
预览效果如下：
为要进行等分布局的父级元素添加”display:flex"，为li元素添加“flex:1"即每个li都占四分之一的宽度，就实现了所谓的等分布局。
不等分布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
ul {
/* 使用flex弹性盒子布局 */
display: flex;
}
li {
border: 1px solid red;
}
.li1 {
/* 占十分之一 */
flex: 1;
}
.li2 {
/* 占十分之二 */
flex: 2;
}
.li3 {
/* 占十分之三 */
flex: 3;
}
.li4 {
/* 占十分之四 */
flex: 4;
}
</style>
</head>
<body>
<ul>
<li class="li1">首页</li>
<li class="li2">公告</li>
<li class="li3">热点</li>
<li class="li4">联系</li>
</ul>
</body>
</html>
浏览效果：
分别为设置了"display:flex"的子元素设计flex的值，计算比例。
左固定右响应布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
ul {
/* 使用flex弹性盒子布局 */
display: flex;
}
li {
border: 1px solid red;
text-align: center;
}
.li1 {
/* 占300px */
flex: 300px;
}
.li2,
.li3,
.li4 {
/* .li2,.li3,li4平分剩下的宽度 */
flex: 1;
}
</style>
</head>
<body>
<ul>
<li class="li1">首页</li>
<li class="li2">公告</li>
<li class="li3">热点</li>
<li class="li4">联系</li>
</ul>
</body>
</html>
浏览效果如下：
设定flex弹性盒子布局，给子级元素li添加”flex“值，设置li1的元素为固定布局，即300px，而其余三个元素li2,li3,li4平分剩下的宽度。
多行拆行布局
给父级元素添加”flex-warp:warp"表示超过宽度拆行（即起新的一行）进行处理。flex-wrap:nowrap表示不拆行，默认是不拆行的。
看如下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
ul {
/* 使用flex弹性盒子布局 */
display: flex;
/* 设置一个固定宽度 */
width: 300px;
}
li {
border: 1px solid red;
text-align: center;
}
</style>
</head>
<body>
<ul>
<li class="li1">首页</li>
<li class="li2">公告</li>
<li class="li3">热点</li>
<li class="li4">联系</li>
<li class="li1">首页</li>
<li class="li2">公告</li>
<li class="li3">热点</li>
<li class="li4">联系</li>
<li class="li1">首页</li>
<li class="li2">公告</li>
<li class="li3">热点</li>
<li class="li4">联系</li>
</ul>
</body>
</html>
浏览效果如下：
发现文字被换行了，宽度被压缩了。
将ul的CSS样式修改为如下：
ul {
/* 使用flex弹性盒子布局 */
display: flex;
/* 给定一个固定宽度 */
width: 300px;
/* 子级元素多行进行拆行处理 */
flex-wrap: wrap;
}
再次运行效果如下：
会发现文字内容没有换行，而多余的子元素被拆行了。
子级元素横向排列
给父级元素添加“justify-content:center"表示使子级元素横向排列居中显示。其他的值如”flex-start"表示默认居左排列；“flex-end"表示居右排列；”center“表示居中排列；”space-between"表示两端对齐；“space-around"表示元素两边间距一样。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
ul {
/* 使用flex弹性盒子布局 */
display: flex;
/* 给定一个固定宽度 */
width: 600px;
/* 设定一个边界进行观察 */
border: 1px solid blue;
/* 子级元素横向排列居中 */
justify-content: center;
}
li {
border: 1px solid red;
text-align: center;
width: 100px;
}
</style>
</head>
<body>
<ul>
<li class="li1">首页</li>
<li class="li2">公告</li>
<li class="li3">热点</li>
<li class="li4">联系</li>
</ul>
</body>
</html>
效果如下：
子级元素纵向排列
给父级元素添加”align-items:center"表示子级元素纵向居中排列。其他的值跟justify-content的值用法差不多。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
ul {
/* 使用flex弹性盒子布局 */
display: flex;
/* 给定一个固定宽度 */
width: 600px;
/* 给定一个固定高度便于观察 */
height: 200px;
/* 设定一个边界进行观察 */
border: 1px solid blue;
/* 子级纵向排列居中 */
align-items: center;
}
li {
border: 1px solid red;
text-align: center;
width: 100px;
}
</style>
</head>
<body>
<ul>
<li class="li1">首页</li>
<li class="li2">公告</li>
<li class="li3">热点</li>
<li class="li4">联系</li>
</ul>
</body>
</html>
浏览效果如下：
还有个align-content，其值和上面两个差不多，只是该属性在有折行的情况才能显示出效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
ul {
/* 使用flex弹性盒子布局 */
display: flex;
/* 给定一个固定宽度 */
width: 400px;
/* 给定一个固定高度便于观察 */
height: 200px;
/* 设定一个边界进行观察 */
border: 1px solid blue;
/* 子级元素折行处理 */
flex-wrap: wrap;
/* 子级元素横向居中布局 */
justify-content: center;
/* 在有折行的情况下，纵向居中排列 */
align-content: center;
}
li {
border: 1px solid red;
text-align: center;
width: 100px;
}
</style>
</head>
<body>
<ul>
<li class="li1">首页</li>
<li class="li2">公告</li>
<li class="li3">热点</li>
<li class="li4">联系</li>
<li class="li1">首页</li>
<li class="li2">公告</li>
<li class="li3">热点</li>
<li class="li4">联系</li>
<li class="li1">首页</li>
<li class="li2">公告</li>
<li class="li3">热点</li>
<li class="li4">联系</li>
</ul>
</body>
</html>