Flex-direction 行和 justify-content：flex-start 不起作用答案

【问题标题】：Flex-direction row and justify-content: flex-start not workingFlex-direction 行和 justify-content：flex-start 不起作用
【发布时间】：2019-10-08 16:42:24
【问题描述】：

我想显示一个公式，将鼠标悬停在某些文本上会显示 div/消息。我希望我的 div 显示为一行，因此内容应为：

P(1 + R/N)nt

现在它们显示为一列：

P
(1 +
R/
N)
n
t

这是我的代码：

<div key="4">
                <b>How did we get these numbers?</b>
                <div className="equation">
                    <div>
                        <div
                            className="eq"
                            onMouseEnter={this.handleMouseHover}
                            onMouseLeave={this.handleMouseHover}
                        >
                            P
                        </div>
                        {this.state.isHovering && <div>example hover text</div>}
                    </div>
                    <div>
                        <div
                            className="eq"
                            onMouseEnter={this.handleMouseHover}
                            onMouseLeave={this.handleMouseHover}
                        >
                            (1 +
                        </div>
                        {this.state.isHovering && <div>example hover text</div>}
                    </div>
                    <div>
                        <div
                            className="eq"
                            onMouseEnter={this.handleMouseHover}
                            onMouseLeave={this.handleMouseHover}
                        >
                            R/
                        </div>
                        {this.state.isHovering && <div>example hover text</div>}
                    </div>
                    <div>
                        <div
                            className="eq"
                            onMouseEnter={this.handleMouseHover}
                            onMouseLeave={this.handleMouseHover}
                        >
                            N)
                        </div>
                        {this.state.isHovering && <div>example hover text</div>}
                    </div>
                    <div>
                        <div
                            onMouseEnter={this.handleMouseHover}
                            onMouseLeave={this.handleMouseHover}
                        >
                          <sup>n</sup>
                        </div>
                        {this.state.isHovering && <div>example hover text</div>}
                    </div>
                    <div>
                        <div
                            onMouseEnter={this.handleMouseHover}
                            onMouseLeave={this.handleMouseHover}
                        >
                          <sup>t</sup>
                        </div>
                        {this.state.isHovering && <div>example hover text</div>}
                    </div>
                </div>
            </div>

我的情感 CSS 样式：

const equation = css`
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
`;

这是一个沙盒：https://codesandbox.io/s/emotion-pl9m3

【问题讨论】：

标签： css reactjs flexbox

【解决方案1】：

'equation' css 类的样式组件语法错误。如果您检查您的页面，您会注意到类等式的 css 未应用于您的父 div。正确的语法是这样的：

<Equation>
  <div></div>
  <div></div>
  ...
</Equation>

const Equation = styled.div`
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
`;

工作沙盒： https://codesandbox.io/embed/emotion-xupvk

【讨论】：