CODEWITHSUNDEEP
htmlcssflexbox
Retros
Retros

Reputation: 3621

Inline, responsive elements with flex

I have five divs that need to be inlined and responsive so that when a window is resized, they break into a new row. Accordingly. And I need them to be evenly, horizontally spread.

I can't edit HTML, only CSS. And I've tried multiple things. From basic display: inline-block, to display: flex. But the best thing I could accomplish was to inline them and then have them mushed together when the browser is resized. I'm not the best with flexbox and I've tried going through SO for answers, but nothing I apply works.

Here is my code outline. Currently, it spreads the items evenly, but as you can see when the window is resized, they just get smashed together. I want them to go into the second row when the inline no longer works. Something like Bootstrap columns, I guess. Can someone take a look and let me know how I can do this?

.container {
  display: flex;
  text-align: center;
  justify-content: space-between;
}

.item {
  background-color: green;
  border: 1px solid black;
}
<div class="container">
  <div class="item">content goes here, just an example</div>
  <div class="item">content goes here, just an example</div>
  <div class="item">content goes here, just an example</div>
  <div class="item">content goes here, just an example</div>
  <div class="item">content goes here, just an example</div>
</div>

Upvotes: 0

Views: 2307

Answers (1)

Asons
Asons

Reputation: 87303

Add flex-wrap: wrap and give them a min-width

.container {
  display: flex;
  flex-wrap: wrap;                         /*  added  */
  text-align: center;
  justify-content: space-between;
}

.item {
  background-color: green;
  border: 1px solid black;
  min-width: 100px;                         /*  added  */
}
<div class="container">
  <div class="item">content goes here, just an example</div>
  <div class="item">content goes here, just an example</div>
  <div class="item">content goes here, just an example</div>
  <div class="item">content goes here, just an example</div>
  <div class="item">content goes here, just an example</div>
</div>

Or combine flex-wrap: wrap with flex-shrink: 0, which will disallow them from shrink beyond their content

.container {
  display: flex;
  flex-wrap: wrap;                         /*  added  */
  text-align: center;
  justify-content: space-between;
}

.item {
  background-color: green;
  border: 1px solid black;
  flex-shrink: 0;                           /*  added  */
}
<div class="container">
  <div class="item">content goes here, just an example</div>
  <div class="item">content goes here, just an example</div>
  <div class="item">content goes here, just an example</div>
  <div class="item">content goes here, just an example</div>
  <div class="item">content goes here, just an example</div>
</div>

Upvotes: 3

Related Questions