flex layout 4

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox_skills#flex_layout_four

HTML

<!doctype html>

<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Flexbox: Task 4</title>


    <style>
        body {
            background-color: #fff;
            color: #333;
            font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
            padding: 1em;
            margin: 0;
        }

        ul {
          width: 450px;
          list-style:none;
          padding: 0;
          margin: 0;
        }

        li {
          background-color: #4D7298;
          border: 2px solid #77A6B6;
          border-radius: .5em;
          color: #fff;
          padding: .5em;
          margin: .5em;
        }
    </style>



</head>

<body>

  <ul>
    <li>Turnip</li>
    <li>greens</li>
    <li>yarrow</li>
    <li>ricebean</li>
    <li>rutabaga</li>
    <li>endive</li>
    <li>cauliflower</li>
    <li>sea lettuce</li>
    <li>kohlrabi</li>
    <li>amaranth</li>
  </ul>

</body>

</html>

CSS

ul {
  display: flex;
  flex-flow: row wrap;

}

li {
  flex: auto;
}