CSS Flex-box justify-self / align-self 不起作用

Question

我在 React 中使用 Semanti UI react 有一个组件

我试图证明单个容器到弹性端的合理性，但它不起作用

<Item  key={item._id} id={item._id}>
<img className="image" src={item.imageURL} alt="Project Canvas"/>
<div className="content">
<div className="title">{item.title}</div>
<Item.Meta>
{new Date(item.createdDate).toUTCString()}
</Item.Meta>
<Item.Description>{item.description}</Item.Description>
<div className="footer">
<Button primary floated='right' href={item.workURL} target="_blank">
Go to application
<Icon name='right chevron' />
</Button>
<Label color='teal' tag> React </Label>
</div>
</div>
</Item>

我试图灵活结束的组件是="页脚">

我的 CSS

.content{
margin: 1vh !important;
display: flex !important;
flex-direction: column !important;
}
.footer{
padding-top: 2vh !important;
border-top: 1px solid rgba(0,173,181,1) !important;
justify-self: flex-end !important;
align-self: flex-end !important;
}

自我证明和对齐自我不起作用

Answer 1

如果您已使用display: flex定义了布局。

justify-self将被忽略，即它不会有任何效果。

仅当您使用block或grid或使用absolute定位元素时，它才会生效。

您可以在此处阅读更多内容。

对于display:flex，支持以下属性。

justify-content: flex-end; // horizontal axis when flex direction is row.
align-items: flex-end: // vertical axis when flex direction is row.

因此，如果您尝试将页脚放在父容器的右下角，即content.

试试这个：

.footer{
padding-top: 2vh !important;
border-top: 1px solid rgba(0,173,181,1) !important;
justify-content: flex-end !important;
align-items: flex-end !important;
}