I am trying to create a flexbox grid that wraps when the content exceeds the width. I am using flexbox wrap to achieve this. The problem is the content does not align properly because all the words don't contain the same amount of characters.
I am trying to achieve this design seems simple at first glance:
My Best attempt is this:
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>
);
};
change your 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%;
}
You should set 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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With