CSS Flex-box justify-self / align-self 不工作

Question

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

我正在尝试将单个容器调整到 flex-end，但它不起作用

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

我尝试 flex-end 的组件是 < 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;

}

justify-self 和 align-self 不起作用

Answer 1

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

justify-self 将被忽略，即没有效果。

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

您可以阅读更多相关内容 here。

使用 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;

}

CSS Flex-box justify-self / align-self 不工作

CSS Flex-box justify-self / align-self not working

javascript

css

reactjs

flexbox

semantic-ui