我正在尝试创建一个 flexbox 网格,当内容超过宽度时它会换行。我正在使用 flexbox wrap 来实现这一点。问题是内容没有正确对齐,因为所有单词不包含相同数量的字符。
我正在尝试实现这个设计,乍一看似乎很简单:
我最好的尝试是这样的:
我的代码是:
.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>
);
};
最佳答案
将 .wrap 选择器的 flex-basis
值更改为 flex-basis: 25%
.wrap {
display: flex;
flex-direction: column;
text-align: center;
border-top: 1px solid black;
padding: 33px;
flex: 1;
flex-basis: 25%;
}
关于html - 由于填充,Flexbox 无法将文本居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48958160/