Html flexbox 中的 align-self 属性不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20053156/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
align-self property in flexbox is not working?
提问by IhtkaS
I am trying to understand flex box: I want to make the “first” block stretched to match the full width of the browser, and the ”second” block of fixed size and aligned to left.
我试图理解 flex box：我想让“第一个”块拉伸以匹配浏览器的整个宽度，以及固定大小的“第二个”块并与左对齐。
So I used align-items: flex-endin the parent(<html>) and tried to stretch the first block using align-self: stretchin the ”first” block.
所以我align-items: flex-end在 parent( <html>) 中使用，并尝试align-self: stretch在“first”块中使用拉伸第一个块。
This is not working. Both of them are aligned to the left.
这是行不通的。它们都向左对齐。
<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>
采纳答案by dholbert
So the problem is that you've got the <html>node as a flex container, and the <body>node (its child) is the one and only flex item.
所以问题是你把<html>节点当作一个弹性容器，<body>节点（它的子节点）是唯一的弹性项目。
Currently, align-self:stretchon #firstis ignored, because that property only applies to flex items, and #firstis nota flex item (the way you have things set up right now).
目前，align-self:stretch在#first被忽略，因为该属性只适用于柔性的项目，#first是不是柔性物品（你有事情成立了现在的样子）。
To get what you want, you need to make the <body>node a flex container, notthe <html>node. So, just change your first style rule to apply to body{instead of html{
为了得到你想要的，你需要做的<body>节点柔性容器，不是的<html>节点。因此，只需更改您的第一个样式规则以应用于body{而不是html{
(Also, if you want #second to be aligned to the left, you need flex-start, not flex-end. The left edge is the flex-starthorizontal edge, generally.)
（此外，如果您希望 #second 向左对齐，则需要flex-start，而不是flex-end。通常，左边缘是flex-start水平边缘。）
回答by jbenjohnson
Add flex:1 to #first
将 flex:1 添加到 #first
Remove justify-content: flex-start; and align-items: flex-end; from html
移除 justify-content: flex-start; 和 align-items: flex-end; 来自 html
See example: http://codepen.io/anon/pen/vifIr
