display: flex和display: inline-flex的区别
flex：块级
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>display: flex</title>
</head>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
display: flex;
}
</style>
<body>
<div class="box"></div>
<span>span</span>
</body>
</html>
如图
display: flex.png
inline-flex：行级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>display: flex</title>
</head>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
display: inline-flex;
}
</style>
<body>
<div class="box"></div>
<span>span</span>
</body>
</html>
如图
display: inline-flex.png
flex container的属性justify-content、align-items
justify-content：决定flex items在主轴方向对齐方式
flex-start: (默认值)主轴开始
flex-end: 主轴结束
center: 主轴居中
space-between: flex items之前距离相等 主轴开始、主轴结束两端对齐
space-evenly: flex items与主轴开始、主轴结束之前的距离等于flex items之间的距离
space-around: flex items与主轴开始、主轴结束之间的距离是flex items之间距离的一半
flex-start
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex布局justify-content</title>
</head>
<style>
.box {
width: 500px;
height: 400px;
background-color: red;
margin: 0 auto;
display: flex;
justify-content:flex-start;
}
.item {
width: 100px;
height: 100px;
color: #ffffff;
text-align: center;
line-height: 100px;
}
.item1 {
background-color: rosybrown;
}
.item2 {
background-color: rebeccapurple
}
.item3 {
background-color: royalblue;
}
</style>
<body>
<div class="box">
<div class="item item1">item1</div>
<div class="item item2">item2</div>
<div class="item item3">item3</div>
</div>
</body>
</html>
flex-start.png
flex-end
justify-content:flex-end;
flex-end.png
center
justify-content:center;
center.png
space-between
justify-content:space-between;
space-between.png
space-evenly
justify-content:space-evenly;
space-evenly.png
space-around
justify-content:space-around;
space-around.png
网友评论