Home           screen Rotate          screen Rotate          Screen Rotate          Run   
​x
 
<!DOCTYPE html>
<html>
<head>
  <style>
  .flex-container1 {
    display: flex;
    flex-wrap: nowrap;
    background-color: Tomato;
    height: auto;
  }
  
  .flex-container2 {
    display: flex;
    flex-wrap: wrap;
    background-color: Tomato;
    height: auto;
  }
  
  .flex-container3 {
    display: flex;
    flex-wrap: wrap-reverse;
    background-color: Tomato;
    height: auto;
  }
  
  .flex-items {
    background-color: #f1f1f1;
    padding: 10px 25px;
    text-align: center;
    height: 20px;
    width: 100px;
    margin: 5px;
  }
  </style>
</head>
​
<body>
  <h3>Flex-wrap: nowrap; </h3>
  <div class="flex-container1">
    <div class="flex-items">1</div>
    <div class="flex-items">2</div>
    <div class="flex-items">3</div>
    <div class="flex-items">4</div>
    <div class="flex-items">5</div>
    <div class="flex-items">6</div>
    <div class="flex-items">7</div>
    <div class="flex-items">8</div>
  </div>