首页 文章

Flexbox align-self被忽略

提问于
浏览 次
0

align-self的文档说明：

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

但是，这不会发生：

.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;
}

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

文档还说：

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

但是，这些都不起作用：

  • 明确地将 margin:0 添加到子 div 中 .

  • 将 display:inline 添加到子 div 中 .

  • 将 div 更改为 span s .

为什么 align-self 无效？

html css flexbox

1 回答

  • 4

    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>
    回复于

相关问题