JSFiddle - React, Tailwind, and code Playground

HTML

<div class="big">
  <div class="container">
    <div style="margin-top: auto"></div>
  </div>
  <div class="container">
    <div style="margin-left: auto"></div>
  </div>
  <div class="container">
    <div style="margin: auto"></div>
  </div>
  &lt;--Teal thing is a flex item.

  <br>
  <div class="big">
  <div class="container">
    <div class="abs" style="margin-top: auto"></div>
  </div>
  <div class="container">
    <div class="abs" style="margin-left: auto"></div>
  </div>
  <div class="container">
    <div class="abs" style="margin: auto"></div>
  </div>
  &lt;--Teal thing is an abspos child of flex container.

CSS

.container {
      display: flex;
      background: yellow;
      height: 20px;
      width: 20px;
      margin: 2px;
      border: 1px solid black;
      float: left;
    }
    br { clear: both; }
    
    .container > * {
      background: teal;
      height: 6px;
      width: 8px;
    }
    
    .abs {
      position: absolute;
    }