我试图理解弹性盒：
我想让“第一个”块拉伸以匹配浏览器的整个宽度，并使“第二个”块固定大小并左对齐。
所以我用了align-items: flex-end在父级（<html>）并尝试使用拉伸第一个块align-self: stretch在“第一个”块中。
这是行不通的。它们都向左对齐。
<html>
<head>
<style>
html {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-end;
}
#first {
align-self:stretch;
background-color: red;
border: 3px solid black;
}
#second {
background-color:green;
width: 300px;
height: 400px;
border: 3px solid yellow;
}
</style>
</head>
<body>
<div id="first">This is first</div>
<div id="second">This is second</div>
</body>
</html>
所以问题是你有<html>节点作为弹性容器，并且<body>节点（其子节点）是唯一的弹性项目。
现在，align-self:stretch on #first被忽略，因为该属性仅适用于弹性项目，并且#first is not弹性项目（您现在设置的方式）。
为了得到你想要的，你需要做<body>节点是一个弹性容器，not the <html>节点。因此，只需更改要应用的第一个样式规则即可body{代替html{
（另外，如果您希望 #second 向左对齐，您需要flex-start, not flex-end。左边缘是flex-start通常为水平边缘。）
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
