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

Question

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

我试图理解弹性框:我想让"第一个"块拉伸以匹配浏览器的整个宽度,以及固定大小的"第二个"块并向左对齐.

所以我align-items: flex-end在parent(<html>)中使用并试图align-self: stretch在"first"块中使用第一个块来拉伸.

这不起作用.它们都与左边对齐.

<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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

dho*_*ert 13

所以问题是你已经将<html>节点作为flex容器,并且<body>节点(它的子节点)是唯一的flex项.

目前,align-self:stretch在#first被忽略,因为该属性只适用于弯曲的物品,并且#first是不是柔性物品(你有事情成立了现在的样子).

为了得到你想要的,你需要做的<body>节点柔性容器,不是的<html>节点.因此,只需将第一个样式规则更改为适用于body{而不是html{

(另外,如果你想让#second与左边对齐,你需要flex-start,而不是flex-end.左边缘flex-start通常是水平边缘.)

（我的意思是，您可以（例如）使用“ direction：rtl”翻转哪个边缘为“ flex-start”边缘，或者默认使用更复杂的“ writing-mode”属性使文本和Flex容器垂直。如果您不使用这些属性，则具有“ flex-direction：row”的flex容器的左侧为flex-start边缘。） (2认同)

归档时间：	12 年，6 月前
查看次数：	35563 次
最近记录：	8 年，5 月前