将列表与flexbox垂直对齐

Question

我想使列表与flexbox垂直对齐：这是我的问题。我有一个列表，我需要为具有多行的所有元素开始一个新段落，而不会破坏我的布局。到目前为止，我有：

<div class="tab-menu">
    <ul>
        <li class="active"><a href="/about-us/">About us</a></li>
        <li class=""><a href="/our-campus/">Campus</a></li>
        <li class=""><a href="/staff-instructors/"><span>STAFF /</span> INSTRUCTORS</a></li>
        <li class=""><a href="/advisory-board/">ADVISORY BOARD</a></li>
    </ul>
</div>

这是我的css：

.tab-menu {
    background: $cgrey;
    text-align: center;
    ul {
        margin: 0;
        padding: 0;
        li {
            padding: 10px 40px;
            display: inline-block;
            color: white;
            font-size: 20px;
            text-transform: uppercase;
            &:hover {
                a {
                    color: $corange;
                }
            }
            &.active {
                background: black;
            }
            a {
                color: white;
            }
        }
    }
}

我的列表如下：

我最近在列表中的每个项目上添加了“ justify-content-center align-self-center”类，以使它们对齐。问题是，理想情况下，我希望为每个具有多个单词的元素（工作人员和咨询人员）开始一个新段落，但是我想保持相同的高度和相同的对齐方式（select元素的背景图片是黑色的，我想保留它）。有什么办法可以实现？我一直在使用Bootstrap 4