CODEWITHSUNDEEP
cssflexbox
Brad
Brad

Reputation: 7

Why does my flexbox item wrap in this case?

I have a Flexbox row wrap set-up as shown below. The max width of the flex-items (.project) is 500px and I have a medis query that makes the max width of the row 1600px at a min screen width of 1800px.

At that screen size the result is a row of 2 projects and a row of 3 projects. Why does the third item wrap to the second line instead of staying on the first line when the combined width of the projects is 1500px?

If it needs to wrap, I would expect it to wrap in the same way on the second line too creating rows of 2 and a row of 1.

Also I couldn't think of a succinct way to title this question, so any suggestions for me to edit in would be appreciated!

.row {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
  max-width: 1200px;
  margin: 0 auto;
}

.project {
  color: #F7B801;
  background-color: #fff;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  transition: box-shadow 0.3s cubic-bezier(.25, .8, .25, 1);
  margin: 3vh;
  padding: 30px 0;
}

@media (min-width: 1800px) {
  .row {
    max-width: 1600px;
  }
}
<div class="projects">
  <h2>Personal Projects</h2>
  <p class="projects-tagline">Responsively designed personal projects made with the glorious trinity of HTML, CSS and Javascript!</p>
  <div class="row">
    <div class="project calculator">
      <h3 class="card-title">Calculator</h3>
      <a href="https://blbaylis.github.io/Calculator"><img class="img calculator-img" src="calculator all.png"></a>
      <a class="project-link" href="https://blbaylis.github.io/Calculator">Check it out!</a>
    </div>
    <div class="project twitch">
      <h3 class="card-title">Twitch.Tv Helper Tool</h3>
      <a href="https://blbaylis.github.io/Twitch-Tool"><img class="img twitch-img" src="twitch all.png"></a>
      <a class="project-link" href="https://blbaylis.github.io/Twitch-Tool">Check it out!</a>
    </div>
    <div class="project tictactoe">
      <h3 class="card-title">Tic-Tac-Toe Game</h3>
      <a href="https://blbaylis.github.io/tic-tac-toe"><img class="img tictactoe-img" src="tictactoe all.png"></a>
      <a class="project-link" href="https://blbaylis.github.io/tic-tac-toe">Check it out!</a>
    </div>
    <div class="project pomodoro">
      <h3 class="card-title">Pomodoro Timer</h3>
      <a href="https://blbaylis.github.io/pomodoro-timer"><img class="img pomodoro-img" src="pomodoro all.png"></a>
      <a class="project-link" href="https://blbaylis.github.io/pomodoro-timer">Check it out!</a>
    </div>
    <div class="project simon-says">
      <h3 class="card-title">Simon Says Game</h3>
      <h4 class="card-title">Coming soon!</h4>
    </div>
  </div>
</div>

Upvotes: 0

Views: 57

Answers (1)

mahval
mahval

Reputation: 2213

You've got two problems as I see it:

  1. Your margins. Remove the margins on your flex-items. They will potentially take space away from your content, and cause the last item to wrap.
  2. Your @media (min-width: 1800px) doesn't seem to kick because it is a very large width size, so the max-width remains at 1200px which is causing the last item to wrap. Try to put it to 100px for example and you will see.

See: https://stackblitz.com/edit/angular-3mp3a3

Upvotes: 1

Related Questions