JSFiddle - React, Tailwind, and code Playground

by mcat12

HTML

<body>
  <h2>
    Options for the <span class="code">flex-wrap</span> property
  </h2>
  <div id="container">
    <p>
      flex-wrap: wrap (items go left to right)
    </p>
    <ul id="flex-wrap">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ul>
    <br>
    <p>
      flex-wrap: nowrap (items stay next to one another and run off the page)
    </p>
    <ul id="flex-nowrap">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ul>
    <br>
    <p>
      flex-wrap: wrap-reverse (items wrap to the next line as needed, but the order of the items is reversed -- here we start with 6 instead of 1. note *where* the items start is also reversed -- they're going from right to left.)
    </p>
    <ul id="flex-wrap-reverse">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ul>
  </div>

</body>

CSS

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

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

#container {
  width: 600px;
}

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-direction: row;
}

li {
  border: 3px solid orange;
  background-color: orange;
  margin: 1em;
  padding: 1em;
  font-size: 1em;
  font-weight: bold;
  width: 80px;
}

#flex-wrap {
  flex-wrap: wrap;
}

#flex-nowrap {
  max-width: 410px;
  flex-wrap: nowrap;
}

#flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}