flex-wrap 无缘无故不起作用？
如果我缩放页面它必须下降，但它什么也没做
parent :
.team-table{
padding: 0;
margin: 0;
width: 960px;
text-align: center;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: row;
justify-content: space-around;
flex-wrap: wrap;
}
child :
.team-table-cell {
display: block;
border: #7c7a91 solid 1px;
}
最佳答案
从 flexbox 中移除 width
参见 fiddle :https://jsfiddle.net/gmyvj94o/2/
或者如 Paulie_D 评论使用 max-width 而不是 width
body, div, a, li, ul, p, h1, h2, h3, img, span {
margin: 0;
padding: 0;
}
img {
object-fit: contain;
}
h3{
font-family: Roboto;
font-size: 14px;
text-transform: uppercase;
color: #7c7a91;
}
img {
object-fit: contain;
}
p {
font-weight: normal;
font-family: 'RobotoLight';
font-size: 14px;
color: #fff;
line-height: 23px;
}
.team-table{
padding: 0;
margin: 0;
text-align: center;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: row;
justify-content: space-around;
flex-wrap: wrap;
}
.team-table-cell {
display: block;
border: #7c7a91 solid 1px;
}
.team-table-img {
background: #fff;
width: 220px;
height: 230px;
border: none;
}
.team-title {
margin-top: 20px;
}
.team-disc {
padding-bottom: 17px;
margin-top: 2px;
color: #7c7a91;
text-transform: uppercase;
}<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="team-table">
<div class="team-table-cell">
<img class="team-table-img">
<h3 class="team-title">Semf Ucuk</h3>
<p class="team-disc">CEO & Founder</p>
</div>
<div class="team-table-cell">
<img class="team-table-img">
<h3 class="team-title">Dik Adalin</h3>
<p class="team-disc">Engineering</p>
</div>
<div class="team-table-cell">
<img class="team-table-img">
<h3 class="team-title">Jeng Kol</h3>
<p class="team-disc">Designer</p>
</div>
<div class="team-table-cell">
<img class="team-table-img">
<h3 class="team-title">Pet Romak</h3>
<p class="team-disc">Marketing</p>
</div>
</div>
</body>
</html>关于css - flex 包装不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51378586/