JSFiddle - React, Tailwind, and code Playground

by hunguyen170294

HTML

<p>flex-start</p>

<div class="container container-start">
  <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>flex-end</p>

<div class="container container-end">
  <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>center</p>

<div class="container container-center">
  <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>space-between</p>

<div class="container container-btw">
  <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>space-around</p>

<div class="container container-around">
  <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 {
  display: flex;
  display: -webkit-flex;
  height: 200px;
}
.container-start {
  justify-content: flex-start;
}
.container-end {
  justify-content: flex-end;
}
.container-center {
  justify-content: center;
}
.container-btw {
  justify-content: space-between;
}
.container-around {
  justify-content: space-around;
}
.container div{
  width: 150px;
}
.container {
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}