flexbox中的align-self属性不工作？ [英] align-self property in flexbox is not working?
问题描述
我想了解flex box。这里我想让第一块拉伸到匹配全宽的浏览器。和第二块，其具有固定大小并且向左对齐。
所以我使用align-items：flex-end在父（html），并试图拉伸第一块使用align-self：stretch在第一块..但它不工作。两者都向左对齐。请给我一些时间，并复制html代码并检查...
I am trying to understand flex box. Here i want to make the "first" block stretched to match full width of browser. and "second" block of fixed size and aligned to left. So i used align-items:flex-end in parent(html) and tried to stretch first block using align-self:stretch in "first" block.. But it's not working. Both of them are aligned to left. Please bear some time for me and copy the html code and check...
<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;
font-size:30px;
}
#second{
background-color:green;
width:300px;
height:400px;
border: 3px solid yellow;
font-size:20px;
}
</style>
</head>
<body>
<div id="first">
This is first
</div>
<div id="second">
This is second
</div>
</body>
</html>
推荐答案
所以问题是， code>< html> 节点作为flex容器，并且< body> 节点
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.
目前， align-self：stretch 在 #first 被忽略，因为该属性仅适用于flex项目，并且 #first 是不
为了得到你想要的，你需要使< body> 节点a flex容器， < html> 节点。因此，只需更改您的第一个样式规则，即可应用于 body {而不是 html {
To get what you want, you need to make the <body> node a flex container, not the <html> node. So, just change your first style rule to apply to body{ instead of html{
（另外，如果你希望#second与左边对齐，你需要 flex-start ，而不是 flex -end 。左边缘是 flex-start 水平边缘，通常。）
(Also, if you want #second to be aligned to the left, you need flex-start, not flex-end. The left edge is the flex-start horizontal edge, generally.)
这篇关于flexbox中的align-self属性不工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
