Блог

На рисунке ниже вы можете видеть, что дочерние элементы не заполняют родительский элемент(красная часть-пустое пространство). Я пробовал использовать display: 'flex' в родительском и alignItems: 'space-between' alignItems: 'left' в дочернем , но не смог добиться того, чего хочу.

Чего я хочу:

Мой код:

 import { Link } from 'react-router-dom'  export default function Election({ election }) {  return (  lt;divgt;  lt;h1gt;{election.name}lt;/h1gt;  lt;div style={{background: '#892650', display: 'flex'}}gt;   {  election.candidates.map((candidate, i) =gt; {  return (  lt;Link to='candidate-info'gt;  lt;div className="card" style={{width: '18rem', maxHeight: '600px', alignItems: 'space-between'}}gt;  lt;img src="/uploads/profile.jpeg" className="card-img-top" alt="..."/gt;  lt;div className ="card-body"gt;  lt;h5 className ="card-title"gt;{`${candidate.name} ${candidate.surname}`}lt;/h5gt;  lt;p className ="card-text"gt;{candidate.motto}lt;/pgt;  lt;/divgt;   lt;div className ="card-body"gt;  lt;button className ="card-link"gt;Card linklt;/buttongt;  lt;button className ="card-link"gt;Another linklt;/buttongt;  lt;/divgt;  lt;/divgt;  lt;/Linkgt;)  })  }   lt;/divgt;  lt;/divgt;  ) }  

Любые изменения, чтобы заставить его работать, приветствуются. (P.S. решение с начальной загрузкой более предпочтительно)

space-between должно быть включено justify-content и align-items должно быть center . Попробуй это:

 lt;h1gt;{election.name}lt;/h1gt; lt;div style={{background: '#892650', display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}gt;