'Creating centered widgets Reactjs

I want to create 3 widgets that are are equal in width and height and equal distance from each other, I understand that I must use CSS flexbox but not 100% where to start

Any help would be appreciated!

htmlcssflexbox


Solution 1:[1]

You can do this by creating a div with attributes display: flex and flex-direction: row. Then inside this div, create 3 smaller divs with your width and height, then you can use column-gap to create the gap between your widgets. If you want to center your widgets, you can use the justify-content: center property.

Solution 2:[2]

Use justify-content in flex container.

Widgets Evenly spaced in the row. 

.container {
  display: flex;
  justify-content: space-evenly;
}

.widget {
  width: 100px;
  height: 100px;
  background: #ce8888;
  text-align: center;
}
<div class="container">
  <div class="widget">Widget 1</div>
  <div class="widget">Widget 2</div>
  <div class="widget">Widget 3</div>
</div>

Equal spaces between Widgets excluding the start and end space.

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

.widget {
  width: 100px;
  height: 100px;
  background: #ce8888;
  text-align: center;
}
<div class="container">
  <div class="widget">Widget 1</div>
  <div class="widget">Widget 2</div>
  <div class="widget">Widget 3</div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Harley Swift
Solution 2 PR7

Related Questions