css - 带有 flexbox 的响应式列

Question

我在理解如何让这些列堆叠在这个 flexbox 布局中有点困难，这是我的代码。

<div class="team-row">
    <div class="wrap">
        <div class="team-member">               
            <img src="http://placehold.it/270x270" alt="Tommy Shrader" class="member-pic">
            <h3 class="member-title">Tommy Shrader</h3>
            <div class="member-position">
                <p>President and CEO</p>
            </div>
        </div>
        <div class="team-member">               
            <img src="http://placehold.it/270x270" alt="Zachery Reed" class="member-pic">
            <h3 class="member-title">Zachery Reed</h3>
            <div class="member-position">
                <p>Vice President of Operations</p>
            </div>
        </div>
        <div class="team-member">               
            <img src="http://placehold.it/270x270" alt="Mickie Breeding" class="member-pic">
            <h3 class="member-title">Mickie Breeding</h3>
            <div class="member-position">
                <p>Office Administration</p>
            </div>
        </div>
    </div>
</div>

.team-row {
    width: 100%;
    &:nth-of-type(odd) {
        background-color: #f7f7f8;
    }
    .wrap {
        padding: 80px 0 40px;
        display: flex;
        justify-content: space-between;
        @media (max-width: 667px) {
            flex-direction: column;
            justify-content: space-around;
        }
    }
    .team-member {
        width: 27.06%;
        color: #444;
        text-align: center;
        .member-pic {
            margin-bottom: 20px;
        }
        .member-title {
            font-family: 'Abolition Regular';
            font-size: 24pt;
            font-style: normal;
            font-weight: normal;
            margin: 0;
            margin-bottom: 10px;
        }
        .member-position {
            p {
                margin: 0;
                font-size: 15pt;
            }
        }
    }
}

我还设置了一个 jsbin，这样您就可以看到我已经尝试做的事情。

https://jsbin.com/leyiqojuxa/edit?html,css,output

当屏幕明显达到一定宽度时，我试图让这三个元素相互堆叠并像往常一样在包装器中居中。

我对 flexbox 布局还是有点陌生​​，所以我在搜索和理解如何实现这一点时遇到了麻烦。

Answer 1

如前所述，列已经堆叠，但您表示希望它们居中。

然后你需要使用align-items

    @media (max-width: 667px) {
        flex-direction: column;
        justify-content: space-around;
        align-items:center;
    }
}

JSBin Demo

CSS-Tricks - Guide to Flexbox