title: Flexbox CSS alignment properties circumstancially inert?
body: <p>I was working on a project which contained a search box which echoed a neatly formatted string of images with the correct queries from my database. Somewhere in the maze of using Flexbox CSS, however, I managed to end up with: A it escaping my screen and B the s for each item not having spaces above and below each other :(</p>
  
  <p>Here's my code for this part:</p>
  
  <pre><code>&lt;div id= "searchresults" style="width: 100vw; padding-bottom: 3vh; padding-top: 3vh; min-height: 10vh; height: auto; background-color:  #e7e7e7 ; display: flex; flex-wrap: wrap; align-content: space-between; justify-content: space-between;"&gt;
  &lt;?php
  //Makes connection
  include 'dxbase.php';
  $conn = new mysqli($servername, $username, $password, $dbname);
  
  if(isset($_POST["search"])){
  $tempvardf = '%'.$_POST['search'].'%'; #############
  //Defines SQL command to bring up data about the products matching the set search
  $sql = "SELECT id, name, price, location, path FROM products WHERE name LIKE ?;"; #'%$_POST[search]%'
  //Create a prepared statement
  $stmt = mysqli_stmt_init($conn);
  //Prepare the prepared statement
  if (!mysqli_stmt_prepare($stmt, $sql)) {
      echo "SQL STATEMENT FAILED... OOF";
  } else {
      //Bind paramaters to placeholder
      mysqli_stmt_bind_param($stmt, "s", $tempvardf);
      //Run paramaters inside database
      mysqli_stmt_execute($stmt);
      $result = mysqli_stmt_get_result($stmt);
  
      while ($row = mysqli_fetch_assoc($result)) {
          echo  "&lt;div style='background-color: blue; padding: 1vw; width: 30vw; display: flex; flex-direction: column; align-content: space-between;'&gt;";
  
          if(isset($row['path'])){
          echo "&lt;img style='width: 28vw; height: 28vw; ' src=". $row['path']."&gt;". "&lt;br&gt;";
  
          } else {
              echo "can't access image path";
          }
          echo $row['name']."&lt;br&gt;";
          echo "&lt;s&gt;&lt;i&gt;".$row['price']."&lt;/i&gt;&lt;/s&gt;&lt;br&gt;"; #CHANGE THIS ONE TO ORIGINAL NONDISCOUNTED PRICE
          echo $row['price']."&lt;br&gt;";
          echo "&lt;/div&gt;";
      }
      #echo "And that's it!";
  }
  
  
  
  } else {
  
  }
  
  
  ?&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here's the CSS as requested:</p>
  
  <pre><code>body {
      font-family: "Lato", sans-serif;
  }
  
  .sidenav {
      height: 100%;
      width: 0;
      position: fixed;
      z-index: 1;
      top: 0;
      left: 0;
      background-color: #111;
      overflow-x: hidden;
      transition: 0.5s;
      padding-top: 60px;
  
  }
  
  .sidebar {
      padding: 8px 8px 8px 32px;
      text-decoration: none;
      font-size: 25px;
      color: #818181;
      display: block;
      transition: 0.3s;
      white-space: nowrap;
  
  }
  
  .sidebar:hover {
      color: #f1f1f1;
  }
  
  .closebtn {
      position: absolute;
      top: 0;
      right: 25px;
      font-size: 36px;
      margin-left: 50px;
  }
  
  @media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidebar {font-size: 18px;}
  }
  
  .spacedfont {
      letter-spacing:3px;
  }
  
  .headera {
    overflow: hidden;
    background-color: #111;
    padding: 10px 10px;
    height: 15vh;
  }
  
  * {box-sizing: border-box}
  body {margin:0; padding: 0;}
  .mySlides {display: none}
  img {vertical-align: middle;}
  
  /* Slideshow container */
  .slideshow-container {
    position: relative;
    margin: none;
  }
  
  /* Next &amp; previous buttons */
  .prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
  }
  
  /* Position the "next button" to the right */
  .next {
    right: 0;
    border-radius: 3px 0 0 3px;
  }
  
  /* On hover, add a black background color with a little bit see-through */
  .prev:hover, .next:hover {
    background-color: rgba(0,0,0,0.8);
  }
  
  /* Caption text */
  .slideshowtext {
    color: #f2f2f2;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    width: 100%;
    text-align: center;
  }
  
  /* Number text (1/3 etc) */
  .numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
  }
  
  /* The dots/bullets/indicators */
  .dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
  }
  
  .active, .dot:hover {
    background-color: #717171;
  }
  
  /* Fading animation */
  .fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
  }
  
  @-webkit-keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
  }
  
  @keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
  }
  
  /* On smaller screens, decrease text size */
  @media only screen and (max-width: 300px) {
    .prev, .next,.text {font-size: 11px}
  }
  </code></pre>
  
  <p>Just to clarify, this does work and my database echoes my test values correctly but unfortunately hours of efforts trying to hack through a wall of complex CSS have been fruitless.</p>
  
  <p>Here's a screenshot:
  <a href="https://i.stack.imgur.com/KXMBa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KXMBa.png" alt="enter image description here"></a></p>
  
  <p>Any suggestions?</p>
  
  <p>Thank you,</p>