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

我试图让这三个项目叠加在一起，并且当屏幕明显达到某个宽度时，就像正常一样居中。“/ p>

我对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

具有flexbox的响应列

1 个答案: