Question

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

Answer 1

从弹性盒中删除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>

flex-wrap不起作用

1 个答案: