O Flexbox não consegue centralizar o texto por causa do padding - html, css, reactjs, flexbox

Estou tentando criar uma grade flexbox que envolvaquando o conteúdo excede a largura. Estou usando o flexbox wrap para conseguir isso. O problema é que o conteúdo não está alinhado corretamente porque todas as palavras não contêm a mesma quantidade de caracteres.

Estou tentando conseguir este design que parece simples à primeira vista:

Minha melhor tentativa é esta:

Meu código é:

.bg {
width: 990px;
padding: 124px;
height: auto;
border-radius: 6px;
background-color: #fff;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.5);
}

.flexgrid {
width: 100%;
display: flex;
flex-wrap: wrap;
margin: 0 auto;
word-wrap: break-word;
}

.wrap {
display: flex;
flex-direction: column;
text-align: center;
border-top: 1px solid black;
padding: 33px;
flex: 1;
flex-basis: auto;
}

return (
<div className={classes.container}>
<div className={classes.bg}>
<h1>My Flashcards</h1>
<br />
<div className={classes.flashcardcontainer}>
<div className={classes.flexgrid}>
{decks.map((deck, index) => {
return (
<FlashcardDeck
label={deck.label}
lastItem={decks.length === index + 1}
key={index}
/>
);
})}
</div>
</div>
</div>
</div>
);
}
}

const flashCardDeck = props => {
return (
<div className={classes.wrap}>
<img src={deckImage} />
<p>{props.label}</p>
</div>
);
};

Respostas:

mude seu flex-basis valor do seu seletor .wrap para flex-basis: 25%

.wrap {
display: flex;
flex-direction: column;
text-align: center;
border-top: 1px solid black;
padding: 33px;
flex: 1;
flex-basis: 25%;
}

Você deve definir flex-basis: 0

.wrap {
display: flex;
flex-direction: column;
text-align: center;
border-top: 1px solid black;
padding: 33px;
flex: 1;
flex-basis:0;
}

.flex-contain{
display: flex;
}

.flex{
flex: 1;
flex-basis: auto;
border: 1px solid green;
}
.flex-plus-basis{
flex-basis: 0;
}

<h3>Without flex-basis:0</h3>
<div class="flex-contain">
<div class="flex">
<p>Some content in this one</p>
</div>
<div class="flex">
<p>Some content in this one</p>
</div>
<div class="flex">
<p>Some awesome and longer content in this one</p>
</div>
<div class="flex">
<p>Some more content in this one</p>
</div>
<div class="flex">
<p>Some other content in this one</p>
</div>
</div>

<h3>With flex-basis:0</h3>

<div class="flex-contain">
<div class="flex flex-plus-basis">
<p>Some content in this one</p>
</div>
<div class="flex flex-plus-basis">
<p>Some content in this one</p>
</div>
<div class="flex flex-plus-basis">
<p>Some awesome and longer content in this one</p>
</div>
<div class="flex flex-plus-basis">
<p>Some more content in this one</p>
</div>
<div class="flex flex-plus-basis">
<p>Some other content in this one</p>
</div>
</div>