如何使用Flexbox实现邮箱地址在用户名下方的布局

问题出在当前的flex容器结构上：.nav-sr-item-content是flex容器，用户名和邮箱是同级的flex子元素，默认会横向排列，所以单独给邮箱加display:block无法改变它们的布局关系。

要实现邮箱在用户名下方的效果，只需调整结构并利用Flex的垂直排列特性，具体步骤如下：

1. 调整HTML结构 #

把用户名和邮箱包裹到一个统一的容器（比如.nav-sr-item-info）中，让这个容器成为.nav-sr-item-content的flex子元素：

<div class="nav-sr-item-content">
    <div class="nav-sr-item-picture">
        <img src="https://hips.hearstapps.com/hmg-prod/images/pop-index-2020-chevrolet-corvette-c8-102-1571146873.jpg">
    </div>
    <!-- 新增的信息容器，包裹用户名和邮箱 -->
    <div class="nav-sr-item-info">
        <div class="nav-sr-item-name">
            <span class="nav-sr-in-username">My name</span>
        </div>
        <div class="nav-sr-item-email">
            <span>email@gmail.com</span>
        </div>
    </div>
    <div class="nav-sr-clear-item">
        <button>edit</button>
    </div>
</div>

2. 添加CSS样式 #

给新增的.nav-sr-item-info设置flex垂直排列，并调整间距：

.nav-search-users .nav-sr-list .nav-sr-item .nav-sr-item-content .nav-sr-item-info {
    display: flex;
    flex-direction: column; /* 让子元素垂直排列 */
    margin-left: 10px; /* 替代原用户名的margin-left */
    gap: 4px; /* 可选：设置用户名和邮箱的间距 */
}

/* 移除原用户名的margin-left，避免重复 */
.nav-search-users .nav-sr-list .nav-sr-item .nav-sr-item-content .nav-sr-item-name {
    margin-left: 0;
}

效果说明 #

修改后，.nav-sr-item-content的flex子元素变为：头像、信息容器、编辑按钮，三者横向排列；而信息容器内部通过flex-direction: column让用户名和邮箱垂直堆叠，完美实现邮箱在用户名下方的布局。

内容的提问来源于stack exchange，提问作者Freezy