CODEWITHSUNDEEP
htmlcssflexbox
g. mal
g. mal

Reputation: 13

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

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 enter image description here

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

Upvotes: 1

Views: 64

Answers (1)

Asons
Asons

Reputation: 87251

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>

Upvotes: 1

Related Questions