柔性包装不起作用



flex wrap无故不起作用?

如果我缩放页面,它必须向下,但它什么也没做

父级:

.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;
}

子级:

.team-table-cell {
display: block;
border: #7c7a91 solid 1px;
}

jsfiddle

从flexbox 中删除width

参见小提琴: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>