flex 布局
为一种布局方式，适用于容器，也适用于行内元素，就是弹性布局，
使用此方法可以更方便的实现与float，position等相同的效果。
语法是添加到父容器上的：
flex-direction： 布局的排列方向 （主轴排列方向）
值： row 默认值，显示为行。方向从左往右。
row-reverse 显示为行。方向从右往左
column 显示为列。方向从上往下。
column-reverse 显示为列。方向从下往上。
flex-wrap：是否进行换行处理。
值： nowrap; 默认值，不换行处理
wrap; 换行处理
wrap-reverse; 反向换行
flex-flow：flex-direction和flex-wrap复合写法。
justify-content：属性决定了主轴方向上子项的对齐和分布方式。
值：flex-start ： 子项都去左对齐。
flex-end ： 子项都去右对齐。
center ： 子项都居中对齐。
space-between：两端对齐，子项之间的间隔都相等。
space-around：每个子项两侧的间隔相等。两个子项之间的间隔为两边的两倍。
align-items： 每一行中的子元素上下对齐方式。
值： flex-start：子项在每一行顶部对齐
center：子项在每一行中间对齐
flex-end;：子项在每一行底部对齐。
align-content：定义了多行的对齐方式，一行不起作用。
值： 值跟justify-content取值是相同的。就是一个纵向，一个横向。
例：设置一个元素水平垂直居中：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 300px;
height: 300px;
border: 1px solid #000000;
margin: 50px auto;
display:flex;
align-items:center;
justify-content:center;
}
#box1 div{
width: 50px;
height: 50px;
background: red;
}
</style>
</head>
<body>
<div id="box1">
<div>
</div>
</div>
</body>
</html>
运行结果：
下面做一个简单地实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 80%;
height: 1000px;
border: 1px solid #000000;
margin: 50px auto;
}
#box2{
width: 100%;
height: 800px;
display:flex;
/*换行处理*/
flex-wrap : wrap;
/*设置侧轴的对齐方式*/
align-content:space-around;
/*主轴div的对齐方式*/
justify-content:space-evenly;
}
#box2 div{
width:24%;
height: 350px;
background: red;
}
#box1 ul{
margin:0px; padding:0px;
width: 100%;
height: 200px;
background: #404040;
list-style: none;
color: #FFFFFF;
display:flex;
/*设置li的对齐方式上下居中*/
align-items:center;
/*设置li的对齐方式*/
justify-content:space-around;
}
#box1 ul li{
color: #fff;
font-size: 30px;
}
</style>
</head>
<body>
<div id="box1">
<ul>
<li>更多</li>
<li>这是一个实例</li>
<li>登录</li>
</ul>
<div id="box2">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>
运行结果：
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
