Search code examples
reactjsflexboxfluent-ui

Controlling how items are placed in a row via flexbox/fluent ui

I am using flexbox and Microsoft's fluent ui "stack" abstraction of it to display video-cards on a page in my React app. I am using flex-wrap and space-between to keep equal space between each of the items, as the name implies. And this looks perfect when numerous items exist on the page.

However, when you're just starting to add items, and you go to add a second item, instead of placing the item just to the right of the first video-card - which is aligned to the left of the page - the second item gets put on the far right of the row. And then the 3rd item is half the distance of 1 and 2 -- so it's placed in the exact middle of the row.

My question is, how can get that 2nd item -- and then the 3rd, etc. -- to drop in just to the right of the previous item, until the row is full, at which point it wraps to a new row and the same happens again?

This is my code:

<Stack
  horizontal 
  styles={{
   root: {
    'flex-wrap': 'wrap',
    'justify-content': 'space-between'
   }
  }}>
  {this.showNewVideoCard()}
  {this.state.videos.map((video, index) => (
    <div key={index}>
      <VideoCardForm key={video.id}
       ... more code
      /> 
    </div>
  ))}
</Stack>

In other words, when I add the second item, what I'm getting is something like this:

enter image description here

... when what I want is something like this:

enter image description here

And I'm guessing the way it would need to work, behind the scenes, is that the space between each item will need to be calculated based on the maximum number of items you can fit in one row?

Is this a scenario flexbox is designed to handle? Or is this more complicated than I'm realizing? Note: in case it's not already obvious, each video-card will be exactly the same dimensions. So, in my use case, I know I can fit 7 video-cards in a row before it wraps to the next row. I'd just rather the items in a row drop in next to each other, rather than on opposite ends of the row initially.

Solution

  • I believe your issue is that you're using justify-content: space-between, when you should be using justify-content: flex-start and giving each item a margin. Since flex-start is the default value for justify-content you can just remove that line all together.