不能使用挠性盒行列
不能使用挠性盒行列
提问于 2018-04-20 09:18:45
我希望实现类似于列内的行，并且这些列的内容应该垂直放置。
如下所示：
我正在使用react，所以我有各种组件。我认为这是对的，但将"a“和"b”放在同一行是：
.container {
display: flex;
flex-direction: row;
}
.content {
display: flex;
flex-direction: column;
}集装箱类别：
const Field2 = (props) => {
return (
<div className={"container"}>
{props.texturasEscolhidas.map(a => {
return (
<Field2Content>
{a.labelNormalize}
{a.name}
</Field2Content>
)
})}
</div>
)
};
export default Field2;内容类：
const Field2Content = (props) => {
return(
<div className={"content "}>
{props.children}
</div>
)
};
export default Field2Content;回答 3
Stack Overflow用户
回答已采纳
发布于 2018-04-20 09:25:52
差不多是对的。我在下面做了一个例子，并在代码中进行了说明。希望这能有所帮助。
.container {
display: flex;
flex-direction: row;
background-color: lightblue; /* for visibility */
justify-content: space-around; /* spreads flex items horizontally */
}
.content {
display: flex;
flex-direction: column;
background-color: lightgreen; /* for visibility */
width: 10%;
align-items: center; /* places paragraphs in the center horizontally */
margin: 2em 0; /* for top and bottom */
}<div class="container">
<div class="content">
<p>a</p>
<p>b</p>
</div>
<div class="content">
<p>a</p>
<p>b</p>
</div>
<div class="content">
<p>a</p>
<p>b</p>
</div>
<div class="content">
<p>a</p>
<p>b</p>
</div>
</div>
Stack Overflow用户
发布于 2018-04-20 09:28:33
您可以这样做:使用项目制作包装器，并在display中使用flexbox进行row，并使用space-around来获得您的设计。在这些项目中，您可以将子项目(我只需使用文本的跨度)并将它们放入display中，也可以使用flexbox。使用align-items: center;得到你的位置。
以下是关于flexbox：https://css-tricks.com/snippets/css/a-guide-to-flexbox/的有用链接
在下面的工作片段中，希望这会有所帮助：
.wrapper {
width: 500px;
border: 2px solid black;
display: flex;
flex-direction: row;
justify-content: space-around;
padding: 20px;
}
.item {
display: flex;
flex-direction: column;
border: 2px solid black;
padding: 5px;
width: 50px;
align-items: center;
}<div class="wrapper">
<div class="item">
<span>a</span>
<span>b</span>
</div>
<div class="item">
<span>a</span>
<span>b</span>
</div>
<div class="item">
<span>a</span>
<span>b</spa>
</div>
<div class="item">
<span>a</span>
<span>b</span>
</div>
</div>
Stack Overflow用户
发布于 2018-04-20 09:26:57
试试这段代码
.container {
display: flex;
flex-direction: row;
border: 3px solid;
padding: 10px;
justify-content: space-evenly;
}
.content {
display: flex;
flex-direction: column;
border: 1px solid;
padding: 10px;
align-items: center;
}<div class="container">
<div class="content">
<div>A</div>
<div>B</div>
</div>
<div class="content">
<div>A</div>
<div>B</div>
</div>
<div class="content">
<div>A</div>
<div>B</div>
</div>
<div class="content">
<div>A</div>
<div>B</div>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49938227
复制相关文章
相似问题
腾讯云开发者
