为什么我的 display flexbox 右边有空的白色 space？

Question

我正在制作一个应用程序，它在 div 的 #bar-container 内显示 100 个随机高度的条形图。出于某种原因，我的应用程序在我的栏右侧有一些白色 spaces。我希望 div 缩小到内容的大小，然后在屏幕上居中。我的应用程序如下所示：

JSX:

    return (
    <div id="main-container">

        <button onClick={() => newArray()}>New Array</button>

        <div id="bar-container">

            {arr.map((value, index) => (
                <div
                    className='bar'
                    key={index}
                    style={{
                        backgroundColor: "lightgreen",
                        height: `${value}px`
                    }}
                >
                    {value}
                </div>
            ))}

        </div>
    </div>

CSS:

#bar-container {
    align-items: flex-end;
    display: flex;
    margin: 100px;
}

.bar {
    margin: 0 2px;
}

我尝试在#bar-container 的边距中包含 auto，但它不会使条形居中，也不会删除多余的白色 space。

Answer 1

使用justify-content属性,

justify-content: center;

例子

#bar-container {
  align-items: flex-end;
  display: flex;
  justify-content: center;
}

.bar {
  margin: 0 2px;
  background: lightgreen;
  width: 10px;
}

<div id="bar-container">

  <div class="bar" style="height: 70px"></div>
  <div class="bar" style="height: 170px"></div>
  <div class="bar" style="height: 20px"></div>
  <div class="bar" style="height: 120px"></div>
  <div class="bar" style="height: 50px"></div>
  <div class="bar" style="height: 100px"></div>
  <div class="bar" style="height: 90px"></div>
  <div class="bar" style="height: 110px"></div>
  <div class="bar" style="height: 40px"></div>
  <div class="bar" style="height: 30px"></div>
  <div class="bar" style="height: 140px"></div>

</div>

为什么我的 display flexbox 右边有空的白色 space？

Why does my display flexbox have empty white space on the right?

html

css

jsx

flexbox

display

例子