问题是我想让4个盒子像卡片一样水平对齐，但结果却像楼梯一样，请帮助
有99条线，所以请访问这里
jsfiddle
#first {
display: flex;
justify-content: center;
margin-left:10px;
margin-top:20px;
}
最佳答案
请尝试DEMO
从CSS移除第一，第二，第三和第四... nth，在.card-container下添加这些
.card-container {
float: left;
width: calc(100%/4);
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: baseline;
align-content: center;
}
body {
font-family:Arial, Helvetica, sans-serif;
font-size:36px;
}
h1 {
margin:0;
}
.card-container {
perspective:700;
}
.card {
position:relative;
color:white;
text-align:center;
line-height:200px;
margin:20px;
width:200px;
height:200px;
transition:all 0.6s ease;
transform-style:preserve-3d;
}
.front, .back {
background-color:#5677fc;
position:absolute;
top:0;
left:0;
width:200px;
height:600px;
backface-visibility:hidden;
}
.back {
transform:rotateY(180deg);
}
.card:hover {
transform:rotateY(180deg);
}
.card-container {
float: left;
width: calc(100%/4);
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: baseline;
align-content: center;
}<body>
<div class="card-container" id="first">
<div class="card">
<div class="front"><h1>hello</h1></div>
<div class="back"><h1>Goodbye</h1></div>
</div>
</div>
<div class="card-container" id="second">
<div class="card">
<div class="front"><h1>hello</h1></div>
<div class="back"><h1>Goodbye</h1></div>
</div>
</div>
<div class="card-container" id="third">
<div class="card">
<div class="front"><h1>hello</h1></div>
<div class="back"><h1>Goodbye</h1></div>
</div>
</div>
<div class="card-container" id="forth">
<div class="card">
<div class="front"><h1>hello</h1></div>
<div class="back"><h1>Goodbye</h1></div>
</div>
</div>
</body>