创建居中的小部件 Reactjs

Question

我想创建 3 个宽度和高度相等且彼此距离相等的小部件，我知道我必须使用 CSS flexbox 但不是 100% 从哪里开始

如有任何帮助，我们将不胜感激！

Answer 1

您可以通过创建具有属性 display: flex 和 flex-direction: row 的 div 来完成此操作。然后在这个 div 中，用 width 和 height 创建 3 个较小的 div，然后你可以使用 column-gap 在你的小部件之间创建间隙。如果你想让你的小部件居中，你可以使用 justify-content: center 属性.

Answer 2

在 flex 容器中使用 justify-content。

小部件在行中均匀 spaced。

.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>

Widget 之间相等 spaces，不包括开始和结束 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>

创建居中的小部件 Reactjs

Creating centered widgets Reactjs

html

css

flexbox