JSFiddle - React, Tailwind, and code Playground

by hunguyen170294

HTML

<h3>flex-direction</h3>

<p>row</p>

<div class="container">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
  <div>Flex item 4</div>
  <div>Flex item 5</div>
  <div>Flex item 6</div>
  <div>Flex item 7</div>
</div>

<p>row in tiny width</p>

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

<p>row-reverse</p>

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

<p>column</p>
<div class="container-col">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
  <div>Flex item 4</div>
  <div>Flex item 5</div>
  <div>Flex item 6</div>
  <div>Flex item 7</div>
</div>

<p>column-reverse</p>
<div class="container-col-rev">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
  <div>Flex item 4</div>
  <div>Flex item 5</div>
  <div>Flex item 6</div>
  <div>Flex item 7</div>
</div>

<h3>flex-direction</h3>
<p>wrap (with row)</p>

<div class="container-row-wrap">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
  <div>Flex item 4</div>
  <div>Flex item 5</div>
  <div>Flex item 6</div>
  <div>Flex item 7</div>
</div>

<p>wrap (with column)</p>

<div class="container-col-wrap">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
  <div>Flex item 4</div>
  <div>Flex item 5</div>
  <div>Flex item 6</div>
  <div>Flex item 7</div>
</div>

CSS

div {
  border: solid black 1px;
  
}
.container, 
.container-tiny, 
.container-rev, 
.container-col,
.container-col-rev,
.container-col-wrap,
.container-row-wrap {
  display: flex;
  display: -webkit-flex;
  height: 200px;
}
.container-col-wrap div {
  height: 50px;
  width: 100px;
}
.container-row-wrap div{
  width: 200px;
}
.container, .container-tiny, .container-rev {
  -webkit-flex-flow: row nowrap;
  flex-flow: row nowrap;
}
.container-col {
  -webkit-flex-flow: column nowrap;
  flex-flow: column nowrap;
}
.container-col-rev {
  -webkit-flex-flow: column-reverse nowrap;
  flex-flow: column-reverse nowrap;
}
.container-col-wrap {
  -webkit-flex-flow: column wrap;
  flex-flow: column wrap;
}
.container-row-wrap {
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}
.container-rev {
  -webkit-flex-flow: row-reverse nowrap;
  flex-flow: row-reverse nowrap;
}
.container div {
  width: 100px;
}
.container-tiny div {
  width: 10px;
}