JSFiddle - React, Tailwind, and code Playground

flex box test

by nilloc

HTML

<modkit-container row=1 col=1 style="flex-wrap:wrap;">
  <modkit-container class="tester" style="height:60px;">tester 1</modkit-container>
<modkit-container class="tester" style="width:60px; align-self:flex-start; top:50px; height:calc(100% - 100px)">tester 2</modkit-container>
    
      <modkit-container class="tester">tester 3</modkit-container>


</modkit-container>

CSS

body > modkit-container{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  border-style:dotted;
}

modkit-container{
  display:flex;
  border:1px solid rgba(0,0,0,0.1);
  align-items:center;
  align-content:center;
  flex-wrap:wrap;
  /* justify-content:center; */
  justify-content:space-evenly;
  /* margin:0 auto; */ /*same as justify-content:space-around;*/ 
  position:relative;
}

modkit-container[row=1][col=1] > modkit-container{
  flex:1;
}

.tester{
  width: 200px;
  margin-top:10px;
  margin-bottom:10px;
}