[英]Why does my display flexbox have empty white space on the right?
我正在制作一個應用程序,它在#bar-container 內顯示 100 個隨機高度條,這是一個 div。 出於某種原因,我的應用程序在我的欄右側有一些空白。 我希望 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 ,但它不會使條居中,也不會刪除多余的空白。
使用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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.