无法使用flexbox在行上应用列

Question

我希望实现类似于内部列的行，并且这些列的内容应垂直放置。

像这样：

我使用反应，所以我有各种组件。 我认为这是正确的，但保持＆＃34; a＆＃34;和＆＃34; b＆＃34;在同一行是：

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

Answer 1

几乎是正确的。我在下面做了一个例子并记录在代码中。希望这会有所帮助。

.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>

Answer 2

您可以执行以下操作：在display中使用flexbox和row创建包含项目的包装，然后使用space-around来获取您的设计。在这些项目中，您可以将孩子（我只是带有文字的跨度）和display个column也带有flexbox。使用align-items: center;获取您的职位。

这是关于flexbox：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

的有用链接

在工作代码段下方，希望这会有所帮助：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

试试此代码

.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>