在下圖中，您可以看到子元素沒有填充父元素（紅色部分是空白區域）。我試著用display: 'flex'在父母alignItems: 'space-between'，alignItems: 'left'在孩子，但不能達到我想要的。
我想要的是：
我的代碼：
import { Link } from 'react-router-dom'
export default function Election({ election }) {
return (
<div>
<h1>{election.name}</h1>
<div style={{background: '#892650', display: 'flex'}}>
{
election.candidates.map((candidate, i) => {
return (
<Link to='candidate-info'>
<div className="card" style={{width: '18rem', maxHeight: '600px', alignItems: 'space-between'}}>
<img src="/uploads/profile.jpeg" className="card-img-top" alt="..."/>
<div className ="card-body">
<h5 className ="card-title">{`${candidate.name} ${candidate.surname}`}</h5>
<p className ="card-text">{candidate.motto}</p>
</div>
<div className ="card-body">
<button className ="card-link">Card link</button>
<button className ="card-link">Another link</button>
</div>
</div>
</Link>)
})
}
</div>
</div>
)
}
歡迎任何更改以使其正常作業。（PS bootstrap-way 解決方案更可取）
uj5u.com熱心網友回復：
space-between應該是justify-content并且align-items應該是center。嘗試這個：
<h1>{election.name}</h1>
<div style={{background: '#892650', display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/344564.html