Follow up of the post: "...why are there no “justify-items” and “justify-self” properties?"

Question

Follow up question of: In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

Would someone be so kind as to help me combine boxes 55 & 56 [from the top answer]?

This is what I'm looking for

<div class="container">
  <div class="centered">
    55
  </div>
  <div class="bottomright">
    56
  </div>
</div>

I've been struggling with it all day and I give up! Thanks in advance for any help.

Would you be able to add a code snippet to help us solving your issue? — Fabio Vella, Nov 12 '17 at 05:09
and change the title, so that it accurately reflects your problem? — Mr Lister, Nov 12 '17 at 10:15

Asons · Accepted Answer · 2017-11-12T10:59:25.813

There is more than one way to accomplish that, where i.e. the 56 could be positioned absolute, though here I decided to use a pseudo to match it, so it will be more responsive.

What make this work is that the pseudo match the height of the 56, hence the 55 will be centered in the middle of its parent.

Stack snippet

.container {
  display: flex;
  flex-direction: column;           /*  flow vertically  */
  justify-content: space-between;   /*  create a gap between items  */
  height: 200px;
  align-items: center;
  background: yellow;
}

.container .centered {
  width: 90%;
  height: 80px;
  background: lime;
}

.container .bottomright {
  width: 20%;
  background: lime;
  align-self: flex-end;             /*  align right  */
}

.container::before,
.container .bottomright {
  content: '';
  height: 40px;
}

/* extra styling, make text centered  */
.container .centered,
.container .bottomright {
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="container">
  <div class="centered">
    55
  </div>
  <div class="bottomright">
    56
  </div>
</div>

You can achieve this with margins as well, to avoid setting a height on the container

.container {
  display: flex;
  flex-direction: column;           /*  flow vertically  */
  align-items: center;
  background: yellow;
}

.container .centered {
  width: 90%;
  height: 80px;
  margin: 30px 0;                   /*  top/bottom margin  */
  background: lime;
}

.container .bottomright {
  width: 20%;
  background: lime;
  align-self: flex-end;             /*  align right  */
}

.container::before,
.container .bottomright {
  content: '';
  height: 40px;
}

/* extra styling, make text centered  */
.container .centered,
.container .bottomright {
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="container">
  <div class="centered">
    55
  </div>
  <div class="bottomright">
    56
  </div>
</div>

Follow up of the post: "...why are there no “justify-items” and “justify-self” properties?"

1 Answers1