display:flex -->写在父级元素里面,让父级元素里面的子元素都横排显示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
.wrap {
width: 300px;
height: 300px;
background: #666;
display: flex;
}
.box1 {
width: 50px;
height: 50px;
background: red;
}
.box2 {
width: 50px;
height: 50px;
background: green;
}
.box3 {
width: 50px;
height: 50px;
background: blue;
}
</style>
<body>
<div class="wrap">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
flex-direction -->改变元素方向
flex-direction: column; 竖排显示
flex-direction: column-reverse; 竖排翻转
flex-direction: row; 横排显示
flex-direction: row-reverse; 横排翻转
justify-content -->写在父级元素里面,决定子元素水平方向的排列方式
1、 justify-content:flex-start;
2、justify-content:center;
3、justify-content:flex-end;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
.wrap {
width: 300px;
height: 300px;
background: #666;
display: flex;
justify-content: flex-start;
}
.box1 {
width: 50px;
height: 50px;
background: red;
}
.box2 {
width: 50px;
height: 50px;
background: green;
}
.box3 {
width: 50px;
height: 50px;
background: blue;
}
</style>
<body>
<div class="wrap">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
1、 justify-content:flex-start;
2、justify-content:center;
3、justify-content:flex-end;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
.wrap {
width: 300px;
height: 300px;
background: #666;
display: flex;
justify-content: center;
}
.box1 {
width: 50px;
height: 50px;
background: red;
}
.box2 {
width: 50px;
height: 50px;
background: green;
}
.box3 {
width: 50px;
height: 50px;
background: blue;
}
</style>
<body>
<div class="wrap">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
1、 justify-content:flex-start;
2、justify-content:center;
3、justify-content:flex-end;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
.wrap {
width: 300px;
height: 300px;
background: #666;
display: flex;
justify-content: flex-end;
}
.box1 {
width: 50px;
height: 50px;
background: red;
}
.box2 {
width: 50px;
height: 50px;
background: green;
}
.box3 {
width: 50px;
height: 50px;
background: blue;
}
</style>
<body>
<div class="wrap">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
align-item -->写在父级元素里面,决定子元素垂直方向的排列方式
align-items: flex-start;
align-items: flex-end;
align-items: center;
常见关于弹性盒子的面试题:如何让一个元素在一个盒子里水平、垂直方向都居中?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
.wrap {
width: 300px;
height: 300px;
background: #666;
display: flex;
justify-content: center;
align-items: center;
}
.box1 {
width: 50px;
height: 50px;
background: red;
}
/* .box2 {
width: 50px;
height: 50px;
background: green;
}
.box3 {
width: 50px;
height: 50px;
background: blue;
} */
</style>
<body>
<div class="wrap">
<div class="box1"></div>
<!-- <div class="box2"></div>
<div class="box3"></div> -->
</div>
</body>
</html>