CODEWITHSUNDEEP
cssflexbox
Explosion Pills
Explosion Pills

Reputation: 191799

Flex items to two rows when necessary

This might not be possible to do strictly with flexbox or it may require some media queries. I'm fine with that. I'm wondering if there is a way to have four items arranged horizontally in one row that will responsively switch to two columns both with two items.

I've tried various things to do this such as:

.flex-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
button {
  width: 250px;
}
<div class="flex-container">
  <button>a</button>
  <button>b</button>
  <button>c</button>
  <button>d</button>
</div>

This works okay, but if you reduce the screen width it wraps to three items in the first row and one item in the second until you reduce the width to less than the width of the three items. If the screen width gets too small to have all four items arranged horizontally, I'd like it to be two columns and two rows of items.

I have some control over the width of each item in the row, but they will be relatively small like buttons (maybe 200px max).

Is this possible to do with flexbox? If not, is there a better alternative to wrapping to an appropriate grid?

Upvotes: 2

Views: 3043

Answers (2)

theberzi
theberzi

Reputation: 2695

If the width of each button is to stay fixed, you can simply set the max-width of the container to that width, times the (maximum) number of buttons you want on each row.

See this codepen.

Upvotes: -1

Temani Afif
Temani Afif

Reputation: 273979

One idea without media query is to use extra wrapper for the button like below:

.flex-container,
.flex-container > div{
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

button {
  width: 250px;
}
<div class="flex-container">
  <div>
    <button>a</button>
    <button>b</button>
  </div>
  <div>
    <button>c</button>
    <button>d</button>
  </div>
</div>

Upvotes: 2

Related Questions