按钮采用 flexbox div 的高度 [重复]答案

【问题标题】：button taking height of the flexbox div [duplicate]按钮采用 flexbox div 的高度 [重复]
【发布时间】：2020-04-22 23:42:49
【问题描述】：

在下图中，按钮占用了 flexbox 的高度？为什么？我希望它是一个与左侧图像（白色方块）底部对齐的常规按钮。

index.css

.grid-container{
    display:grid;
    grid-template-rows:[nav-row-start]auto [nav-row-end logo-nav-row-start] auto [logo-nav-row-end content-row-start] auto [content-row-end];


}

.nav-style{
    height:5vh; /*make nav div take 5% of space of viewport*/
    background-color:black;

}

.logo-nav-style{
    height:20vh;/*make logo-nav div take 20% of space of viewport*/
    background-color:gray;
}

.nav-flexbox-container{
    display:flex;
    flex-direction:row-reverse;
}

.logo-nav-flexbox-container{
    display:flex;

}
.content-style{
    height:75vh;/*make content div take 75% of space of viewport*/
    background-color:white;
}


#nav{
    grid-row:nav-row-start/nav-row-end;
    margin:0px;
}

#logo-nav{
    grid-row:logo-nav-row-start/logo-nav-row-end;
    margin:0px;
}

#content{
    grid-row:body-row-start/body-row-end;
    margin:0px;
}

#profile-pic {
    margin:5px;
}
#mail-icon-pic{
    margin:5px;
}
#stats-icon-pic{
    margin:5px;
}

#logo-image{
    /*the max width and max height rule will make the image fit inside the div. If the image is bigger than div, the image will
    contract, if the image is smaller than the div, the image will expand*/
    max-width:100%;
    max-height:100%;
}
body{
    margin:0px;
}

index.html

<!DOCTYPE html>
<html>
<head>
<link  rel="stylesheet" type="text/css" href="index.css">
<title>Something</title>
</head>
<body>
<div class="grid-container">
    <div id="nav" class="nav-style nav-flexbox-container">
        <img id="stats-icon-pic" src="stats_icon.png"> 
        <img id="mail-icon-pic" src="mail_icon.png"> 
    </div>
    <div id="logo-nav" class="logo-nav-style logo-nav-flexbox-container">
        <img id="logo-image" src="example_logo.png">
        <button type="button">Questions</button>
    </div>
    <div id="content" class="content-style">body</div>
</div>
</body>
</html>

【问题讨论】：

标签： css flexbox

【解决方案1】：

align-items flexbox 属性设置为stretch。 See CSS tricks on flexbox.

使用这个：

.logo-nav-flexbox-container{
    display:flex;
    align-items: flex-start;
}

【讨论】：

【解决方案2】：

我必须添加align-items: flex-end 规则

.logo-nav-flexbox-container{
    display:flex;
    align-items: flex-end;
}

【讨论】：