title: css responsive layout - how to avoid a single item in the second row?
body: <p>I have this css code for a responsive menu:</p>
  
  <pre><code>.portfolio-menu {
     display:inline-flex;      
     width:100%;
     justify-content: center;
     flex-wrap:wrap;
     background:grey;
     margin:0 auto;
     padding:0;
     padding-right:10%;
  }
  
  .portfolio-menu li {
    display:inline-block;
    margin-left:30px;
  }
  </code></pre>
  
  <p>when I move in the browser window on certain occasions there is only one item left on the second row. I'd like to leave at least two items on the second row. How do I do that?</p>
  
  <p>For example:</p>
  
  <p><strong>INCORRECT:</strong></p>
  
  <p>• item 1 • item 2 • item 3 • item 4 • item 5 </p>
  
  <p>• item 6 &lt;-- single item</p>
  
  <p><strong>CORRECT:</strong></p>
  
  <p>• item 1 • item 2 • item 3 • item 4</p>
  
  <p>• item 5 • item 6 &lt;-- at least two items here</p>