Aligning Two Flex Items: One to the Top, the Other Centered

Center one and right/left align other flexbox element

Below are five options for achieving this layout:

CSS Positioning
Flexbox with Invisible DOM Element
Flexbox with Invisible Pseudo-Element
Flexbox with flex: 1
CSS Grid Layout

Method #1: CSS Positioning Properties

Apply position: relative to the flex container.

Apply position: absolute to item D.

Now this item is absolutely positioned within the flex container.

More specifically, item D is removed from the document flow but stays within the bounds of the nearest positioned ancestor.

Use the CSS offset properties top and right to move this element into position.

li:last-child {

  position: absolute;

  top: 0;

  right: 0;

  background: #ddd;

}

ul {

  position: relative;

  padding: 0;

  margin: 0;

  display: flex;

  flex-direction: row;

  justify-content: center;

  align-items: center;

}

li {

  display: flex;

  margin: 1px;

  padding: 5px;

  background: #aaa;

}

p {

  text-align: center;

  margin-top: 0;

}

span {

  background-color: aqua;

}

<ul>

  <li>A</li>

  <li>B</li>

  <li>C</li>

  <li>D</li>

</ul>

<p><span>true center</span></p>

Align two flex items vertically independent of each other

You can make use of justify-self and align-self for variant 2 and 3. Everything else is basic flexbox and grid which you can learn here and here.

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body{
  display: flex;
  flex-wrap: wrap;
  margin: 1rem;
  gap: 1rem;
}
.variant{
  padding: 1rem;
  background-color: #6D6A89;
  height: 25rem;
  width: 250px;
  color: #fff;
}

.var1{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.var2{
  display: grid;
}
.var2>*{
  justify-self: center;
}

.var3{
  display: grid;
}

.var3>*{
  align-self: end;
  justify-self: center;
}

.var4{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

<body>
  <div class="variant var1">
    <h1>Title top</h1>
    <div class="caption">caption top</div>
  </div>
  <div class="variant var2">
    <h1>Title top</h1>
    <div class="caption">caption center</div>
  </div>
  <div class="variant var3">
    <h1>Title center</h1>
    <div class="caption">caption bottom</div>
  </div>
  <div class="variant var4">
    <h1>Title top</h1>
    <div class="caption">caption bottom</div>
  </div>
</body>

what is the best way to flex align two items right and one left

You can add another div around the 2 on the right, and then use margin to create space around all of the div's

.container{

display:flex;

justify-content: space-between;

background: grey;

width: 400px;

height: 400px;

}

.content1,

.content2,

.content3{

background: green;

width: 50px;

height: 50px;

margin: 10px;

}

.align{

display:flex;

}

<div class="container">

      <div class="content1">1</div>

      <div class="align">

        <div class="content2">2</div>

        <div class="content3">3</div>

      <div>

    </div>

Flexbox using align-items: flex-start together with align-content: center

To achieve the desired result, you can make use of a media query.

To make this work, remove the flex-wrap and align-content properties from the .flex-container element. We will nly add these properties on the .flex-container element at a particular width of the browser window.

For example, following media query

@media (max-width: 450px) {
  .flex-container {
    flex-wrap: wrap;
    align-content: center;
  }
}

will make a flex container a multi-line flex container when the width of the browser window equal to or smaller than 450px. We also add align-content: center to make sure that the flex-lines are aligned in the center of the flex container.

This ensures that for a width greater than 450px, flex container has only one flex-line and flex items are aligned at the start of that single flex-line. For a width smaller than or equal to 450px, we make the flex container a multi-line flex container and align those flex-lines at the center of the flex container using align-content: center.

Working Demo

* {
  box-sizing: border-box;
  font-size: 1.5rem;
}

html {
  background: #b3b3b3;
  padding: 5px;
}

body {
  background: #b3b3b3;
  padding: 5px;
  margin: 0;
}

.flex-container {
  height: 500px;
  background: white;
  padding: 10px;
  border: 5px solid black;
  display: flex;
  justify-content: space-evenly;
  align-items: flex-start;
}

.flex-container div {
  color: white;
  padding: 10px;
  border: 5px solid black;
  margin: 10px;
}

.item-1 { background: #ff7300; }
.item-2 { background: #ff9640; }
.item-3 { background: #ff9640; }
.item-4 { background: #f5c096; }
.item-5 { background: #d3c0b1; }
.item-6 { background: #d3c0b1; }   

@media (max-width: 450px) {
  .flex-container {
    flex-wrap: wrap;
    align-content: center;
  }
}

<div class="flex-container">
  <div class="item-1">1</div>
  <div class="item-2">2</div>
  <div class="item-3">3</div>
  <div class="item-4">4</div>
  <div class="item-5">5</div>
  <div class="item-6">6</div>
</div>

How to align items above and below each other within one flexbox?

It might help to rethink the structure of your components. If you wrap <PrizeText> and <GoldText> in a container and <Text> and <GoldText> in another container then things will fall into place for you.

structure

Kind of like this:

.wrapper {

  display: flex;

  justify-content: space-around;

  padding: 1rem;

}

.missing-wrapper {

  width: 50%;

}

h1, h5, div {

  border: 1px solid red;

}

<div class="wrapper">

  <div class="missing-wrapper">

    <h5>Prize Pool</h5>

    <h1>$7,162,245</h1>

  </div>

  <div class="missing-wrapper">

    <h5>Number Active</h5>

    <h1>238,741</h1>

  </div>

</div>