设置弹性盒子:display
flex:块级的弹性盒子
inline-flex:行级的弹性盒子
-webkit-flex:苹果和谷歌的兼容性
搞清楚子元素和父元素
设置在父元素上的值
flex-direction:子元素在父容器中的位置(默认row)
row:横向从左到右排列(左对齐),默认排列
row-reverse:横向右对齐元素反转
column:纵向排列
column-reverse:反转纵向排列
主轴和交叉轴(侧轴)
主轴为flex-direction属性对其的方式的方向
交叉轴为主轴的垂直方向
比如:flex-direction: row;
主轴为水平向右
交叉轴为垂直向下
flex-wrap:子元素换行方式(默认nowrap)
nowrap:默认, 弹性容器为单行
wrap:弹性容器为多行
wrap-reverse:反转 wrap 排列
案例-垂直居中对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.main1 {
position: relative;
height: 200px;
background: #8A469B;
}
.main1 div {
display: block;
width: 50%;
height: 50%;
background: #EA7F26;
overflow: hidden;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.main1 div span {
position: absolute;
margin: 0;
padding: 0;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #EA7F26;
}
.main2 {
height: 200px;
display: flex;
justify-content: center;
align-items: center;
background: #8A469B;
}
.main2 div {
width: 50%;
height: 50%;
display: flex;
justify-content: center;
align-items: center;
background: #EA7F26;
}
</style>
</head>
<body>
<h3>不使用Flexbox</h3>
<div class="main1">
<div>
<span>
111
</span>
</div>
</div>
<h3>使用Flexbox</h3>
<div class="main2">
<div>
<span>
222
</span>
</div>
</div>
</body>
</html>