Flex布局
一种非常方便的布局方式。 在容器中记住4个样式display: flex; flex布局 flex-direction: row; 规定主轴的方向：row/column justify-content: space-around; 元素在主轴方向上的排列方式:flex-start/flex- end/space-around/space-between align-items: center; 元素在副轴方向上的排列方式:flex-start/flex- end/space-around/space-between
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
<style>
.menu{
height:200px;
display:flex;
flex-direction:row;
justify-content: space-between;
align-items:center
}
.item{
width:20px;
height:40px;
border:solid green;
background:red;
}
</style>
</head>
<body>
<div class="menu">
<div class="item">
1
</div>
<div class="item">
2
</div>
<div class="item">
3
</div>
<div class="item">
4
</div>
</div>
</body>
</html>