flex.css

/* tailwindcss */
.flex {
  align-items: center;
}
.flex-col.left, .flex.top:not(.flex-col) {
  align-items: flex-start;
}
.flex-col.top, .flex.left:not(.flex-col) {
  justify-content: flex-start;
}
.flex-col.bottom, .flex.right:not(.flex-col) {
  justify-content: flex-end;
}
.flex.center {
  justify-content: center;
}
.flex-col.top.bottom, .flex.left.right:not(.flex-col) {
  justify-content: space-between;
}
.flex:not(.flex-col) > .self-top, .flex-col > .self-left {
  align-self: flex-start;
}
.flex:not(.flex-col) > .self-bottom, .flex-col > .self-right {
  align-self: flex-end;
}
.flex:not(.flex-col) > .self-center, .flex-col > .self-center {
  align-self: center;
}

/* common */
.flex-fill {
  display: block;
  flex: 1;
}

flex-v, flex-h,
.flex-v, .flex-h,
flex-v.flex-fill,
flex-h.flex-fill {
  display: flex;
  align-items: center;
}

flex-v.inline,
.flex-h.inline {
  display: inline-flex;
}

flex-h.wrap, .flex-h.wrap,
flex-v.wrap, .flex-v.wrap{
  flex-wrap: wrap;
  align-content: center;
}

flex-h.wrap.between, .flex-h.wrap.between,
flex-v.wrap.between, .flex-v.wrap.between{
  align-content: space-between;
}

flex-h.wrap > hr,
.flex-h.wrap > hr{
  width: 100%;
  border: 0;
  margin: 0;
}

flex-v.wrap > hr,
.flex-v.wrap > hr{
  height: 100%;
  border: 0;
  margin: 0;
}

flex-v, .flex-v {
  flex-direction: column;
}

flex-h.stretch, .flex-h.stretch,
flex-v.stretch, .flex-v.stretch{
  align-items: stretch;
}

flex-v.right, flex-h.bottom,
.flex-v.right, .flex-h.bottom {
  align-items: flex-end;
}

flex-v.left, flex-h.top,
.flex-v.left, .flex-h.top {
  align-items: flex-start;
}

flex-v.top, flex-h.left,
.flex-v.top, .flex-h.left {
  justify-content: flex-start;
}

flex-v.bottom, flex-h.right,
.flex-v.bottom, .flex-h.right {
  justify-content: flex-end;
}

flex-v.center, flex-h.center,
.flex-v.center, .flex-h.center {
  justify-content: center;
}

flex-v.top.bottom, flex-h.left.right,
.flex-v.top.bottom, .flex-h.left.right {
  justify-content: space-between;
}

flex-h > .self-top, .flex-h > .self-top,
flex-v > .self-left, .flex-v > .self-left{
  align-self: flex-start;
}

flex-h > .self-bottom, .flex-h > .self-bottom,
flex-v > .self-right, .flex-v > .self-right{
  align-self: flex-end;
}

flex-h > .self-center, .flex-h > .self-center,
flex-v > .self-center, .flex-v > .self-center{
  align-self: center;
}