Creating centered widgets Reactjs-CodePudding

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!

CodePudding user response：

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.

CodePudding user response：

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 >
  <div >Widget 1</div>
  <div >Widget 2</div>
  <div >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 >
  <div >Widget 1</div>
  <div >Widget 2</div>
  <div >Widget 3</div>
</div>