Question

我想了解弹性盒子：我希望拉伸“第一个”块以匹配浏览器的整个宽度，以及固定大小的“第二个”块并向左对齐。

所以我在父（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>

Answer 1

所以问题是你有<html>节点作为flex容器，而<body>节点（它的子节点）是唯一的flex项。

目前，align-self:stretch上的#first会被忽略，因为该属性仅适用于弹性项目，而#first 不是一个弹性项目（就像你一样）现在就设置好了。）

要获得所需内容，您需要使<body>节点成为灵活容器，不 <html>节点。因此，只需将第一个样式规则更改为应用于body{而不是html{

（另外，如果您希望#second与左侧对齐，则需要flex-start，而不是flex-end。左边缘通常是flex-start水平边缘。）< / p>

Answer 2

将flex：1添加到#first

删除justify-content：flex-start;和align-items：flex-end;来自html

参见示例：http://codepen.io/anon/pen/vifIr

flexbox中的align-self属性不起作用？

2 个答案: