CSS Flex-box justify-self align-self不能用 [重复]

Question

这个问题在这里已经有了答案:

在CSS Flexbox中，为什么没有 "justify-items "和 "justify-self "属性？ (5个答案)

封闭 上月.

我有一个组件在React使用 Semanti UI反应

我正试图向柔性端证明一个容器的合理性，但它不工作。

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

我正在尝试的灵活端组件是 < div class="footer">

我的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;

}