JSFiddle - React, Tailwind, and code Playground

by mcat12

HTML

<body>
  <h2>
    Options for the <span class="code">justify-content</span> property
  </h2>
  <div id="container">
    <p>justify-content: flex-start </p>
    <ul id="flex-start">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ul>
    <br>
    <p>justify-content: flex-end
    </p>
    <ul id="flex-end">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ul>
    <br>
    <p>
      justify-content: center
    </p>
    <ul id="center">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ul>
    <br>
    <p>
      justify-content: space-between
    </p>
    <ul id="space-between">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ul>
    <br>
    <p>
      justify-content: space-around
    </p>
    <ul id="space-around">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ul>
    <br>
    <p>
      justify-content: space-evenly
    </p>
    <ul id="space-evenly">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ul>
		<br>
    <h3>
      Below are other justify-content values useed on a flex container. Notice they all have the same behavior.
    </h3>
    <p>
      justify-content: start
    </p>
    <ul id="start">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ul>
    <br>
    <p>
      justify-content: end
    </p>
    <ul id="end">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ul>
    <br>
    <p>
      justify-content: left
    </p>
    <ul id="left">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ul>
    <br>
    <p>
      justify-content:...

CSS

body {
  font-family: Arial, Helvetica, sans-serif;
}

.code {
  font-family: Courier New, monospace;
  font-weight: bold;
  color: blue;
}

#container {
  width: 1000px;
}

p {
  font-size: 18px;
  font-family: Courier New, monospace;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  border: 3px solid blue;
  display: flex;
  flex-flow: row wrap;
}

li {
  width: 70px;
  border: 3px solid orange;
  background-color: orange;
  font-weight: bold;
  margin-left: 0;
  margin-right: 0;
  margin-top: 1em;
  margin-bottom: 1em;
  padding: 1em;
  text-align: center;
}

#flex-start {
  justify-content: flex-start;
}

#flex-end {
  justify-content: flex-end;
}

#center {
  justify-content: center;
}

#space-between {
  justify-content: space-between;
}

#space-around {
  justify-content: space-around;
}

#space-evenly {
  justify-content: space-evenly;
}

#start {
  justify-content: start;
}

#end {
  justify-content: end;
}

#left {
  justify-content: left;
}

#right {
  justify-content: right;
}

#normal {
  justify-content: normal;
}

#stretch {
  justify-content: stretch;
}