弹性盒。未在同一高度上对齐的元素

Question

我创建了一个包装器元素，其中包含 2 个彼此相邻的内联块框（图中为浅绿色和黄色）。然后我创建了另外两个 div 都嵌套在一个内联块中以使内容居中。它可以工作，但由于某种原因，即使我不使用任何边距、填充或绝对定位，我的 flexbox 的垂直位置也会向下移动。如果有人知道为什么会发生这种情况，请赐教！我真的很感激。

视觉表现：

HTML 代码：

  <section className="summary">
                <div className="summary-wrapper">

                    <div className="user-wrapper">
                        <div className="user-wrapper__photo">
                            <div className="user-wrapper__photo-avatar">
                                test
                            </div>
                        </div>

                        <div className="user-wrapper__userInfo">
                            <div className="user-wrapper__userInfo-text">
                                <div>Rodney Wormsbecher</div>
                                <div>Software developer</div>
                            </div>
                        </div>
                    </div>

                </div>
            </section>

SCSS 代码：

.summary {
    height: 20rem;
    background-color: #333;
    width: 100%;
    display: block;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 85%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 75%, 0% 100%);
    padding: 40px;
    color: white;

    &-wrapper {
        width: 100%;
        height: 8rem;
        // background: red;
    }

    & .user-wrapper {
        display: inline-block;
        width: 20rem;
        height: 5rem;
        background: yellow;

        &__photo {
            display: inline-block;
            background:  aqua;

            &-avatar {
                display: flex;
                align-items: center;
                justify-content: center;
                background: pink;
                height: 5rem;
                width: 5rem;
                border-radius: 50%;
            }

        }

        &__userInfo {
           display: inline-block;

           &-text {
            display: flex;
            padding-left: 1.5rem;
            height: 5rem;
            width: 15rem;
            align-items: flex-start;
            flex-direction: column;
            justify-content:  center;

           }
        }
    }
}

Answer 1

我发现带有 display: inline-block 的框需要一个 'vertical-align: top' 属性。然后我不得不重新调整 flexbox 项。

更新的 SCSS：

.summary {
    height: 20rem;
    background-color: #333;
    width: 100%;
    display: block;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 85%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 75%, 0% 100%);
    padding: 40px;
    color: white;

    &-wrapper {
        width: 100%;
        height: 8rem;
        // background: red;
    }

    & .user-wrapper {
        display: inline-block;
        width: 20rem;
        height: 5rem;
        background: aqua;
        vertical-align: top;

        &__photo {
            display: inline-block;

            &-avatar {
                display: flex;
                align-items: center;
                justify-content: center;
                background: pink;
                height: 5rem;
                width: 5rem;
                border-radius: 50%;
            }

        }

        &__userInfo {
           display: inline-block;
           vertical-align: top;

           &-text {
            display: flex;
            padding-left: 1.5rem;
            height: 5rem;
            width: 15rem;
            align-items: flex-start;
            flex-direction: column;
            background-color: yellow;
            justify-content: center;
           }
        }
    }
}