Question

align-self州的文档：

align-self CSS属性对齐当前弹性线的弹性项，覆盖align-items值。

但是，这不会发生：

＆＃13;

define('WP_DEBUG', true);

＆＃13;

.example {
  display: flex;
  align-items: center;
  border: 1px solid blue;
  height: 8ex;
}

.example > div {
  border: 1px solid red;
}

#a > div:last-child {
  align-self: top;
}

#b > div:last-child {
  align-self: center;
}

#c > div:last-child {
  align-self: bottom;
}

＆＃13;

文档也说：

如果任何项目的横轴边距设置为auto，则忽略align-self。该属性不适用于块级框或表格单元格。

但是，这些都不起作用：

明确将<body> <div id="a" class="example"><div>1</div><div>2</div></div> <div id="b" class="example"><div>1</div><div>2</div></div> <div id="c" class="example"><div>1</div><div>2</div></div> </body>添加到子margin:0 s。
将div添加到子display:inline s。
将div更改为div s。

为什么span无效？

Answer 1

top和bottom不是align-self的有效值。请改用flex-start和flex-end：

.example {
  display: flex;
  align-items: center;
  border: 1px solid blue;
  height: 8ex;
}

.example > div {
  border: 1px solid red;
}

#a > div:last-child {
  align-self: flex-start;
}

#b > div:last-child {
  align-self: center;
}

#c > div:last-child {
  align-self: flex-end;
}

<body>
<div id="a" class="example"><div>1</div><div>2</div></div>
<div id="b" class="example"><div>1</div><div>2</div></div>
<div id="c" class="example"><div>1</div><div>2</div></div>
</body>

Flexbox align-self被忽略

1 个答案: