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

【问题标题】：align-self property in flexbox is not working?flexbox 中的 align-self 属性不起作用？
【发布时间】：2013-12-01 22:05:03
【问题描述】：

我正在尝试理解弹性框：我想让“第一个”块拉伸以匹配浏览器的整个宽度，而“第二个”块的大小固定并左对齐。

所以我在父级（<html>）中使用了align-items: flex-end，并尝试在“第一个”块中使用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 css flexbox

【解决方案1】：

所以问题是您将<html> 节点作为弹性容器，而<body> 节点（它的子节点）是唯一的弹性项目。

目前，#first 上的 align-self:stretch 被忽略，因为该属性仅适用于弹性项目，而 #first 不是弹性项目（您现在设置的方式)。

要获得您想要的，您需要将<body> 节点设为弹性容器，不是<html> 节点。因此，只需将您的第一个样式规则更改为应用于body{ 而不是html{

（另外，如果你想让#second左对齐，你需要flex-start，而不是flex-end。左边缘通常是flex-start水平边缘。）

【讨论】：

@dhollbert 你所说的“一般”是什么意思？ :D
（我的意思是你可以（例如）使用flex-start 翻转哪个边缘是flex-start 边缘，或者使用更复杂的writing-mode 属性使文本和弹性容器垂直默认值。如果您不使用这些属性，则带有 flex-direction: row 的 flex 容器的 flex-start 边缘将位于左侧。）

【解决方案2】：

将 flex:1 添加到 #first

移除 justify-content: flex-start;和对齐项目：flex-end；来自html

查看示例：http://codepen.io/anon/pen/vifIr

【讨论】：