Flexbox cannot center text due to padding

Question

I am trying to create a flexbox grid that wraps when the content exceeds the width. For this I use flexbox wrap. The problem is that the content is not aligned properly, because all words do not contain the same number of characters.

I am trying to achieve this design, it seems simple at first glance:

My best attempt:

My code is:

.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> ); }; 

Answer 1

change the flex-basis value of your .wrap selector to flex-basis: 25%

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

Answer 2

You must install 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>