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

Question

I have a component in React using Semanti UI react

I am trying to justify a single container to the flex-end but it's not working

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

the component that I am trying to flex-end is the < div class="footer">

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

}

the justify-self and align-self doesn't work

score 6 · Accepted Answer · answered May 13 '20 at 06:09

If you have defined your layout using display: flex.

justify-self will be ignored, i.e it will have no effect.

It will only have effect when you have used block or grid or have positioned an element using absolute.

You can read more on that here.

With display:flex, following properties are supported.

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

So if you are trying to place the footer at right-bottom of your parent container i.e content.

Try this :

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

}

I want to emphasize that you can still use `justify-self` to override the behavior of individual elements if you replace your flexbox with a grid. To make the grid more of a drop-in replacement for your flexbox, you can set its `grid-auto-flow` to `column`/`row`. — Adam Lee, May 12 '22 at 16:35

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

1 Answers1