Flexbox的对齐自被忽略

的文档align-self状态：Flexbox的对齐自被忽略

的对齐自CSS属性来使当前的弯折线覆盖对齐项值的柔性物品。

但是，这种情况不会发生：

.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 s。
将div s更改为span s。

为什么align-self无法正常工作？

来源

2017-06-06 Jason C

[meta标记：功能请求]：能够将downvote你自己的问题。 –

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>

来源

2017-06-06 18:06:18

啊，谢谢。我想我对'align-items'过分关注，并且我没有注意到这些选项是无效的。现在我想要降低自己的问题。太好了，谢谢！ –

Flexbox的对齐自被忽略

回答

相关问题