<分区>
css - 按钮采用 flexbox div 的高度
在下图中，按钮占用了 flexbox 的高度？为什么？我希望它是一个与左侧图像(白色方 block )底部对齐的常规按钮。
索引.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>
最佳答案
align-items flexbox 属性设置为stretch。 See CSS tricks on flexbox.
使用这个:
.logo-nav-flexbox-container{
display:flex;
align-items: flex-start;
}
关于css - 按钮采用 flexbox div 的高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59595012/