CODEWITHSUNDEEP
cssreactjsflexbox
maddie
maddie

Reputation: 1954

Flex-direction row and justify-content: flex-start not working

I want to display a formula that on hover over certain text displays a div/message. I want my divs to display as a row, so the content should read as:

P(1 + R/N)nt

Right now they display as a column:

P
(1 +
R/
N)
n
t

This is my code:

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

My emotion CSS styling:

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

This is a sandbox: https://codesandbox.io/s/emotion-pl9m3

Upvotes: 1

Views: 10254

Answers (1)

Arian Khosravi
Arian Khosravi

Reputation: 457

Your styled component syntax for the 'equation' css class is wrong. If you inspect your page, you'll notice the css for class equation is not being applied to your parent div. The right syntax is something like this:

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

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

Working sandbox: https://codesandbox.io/embed/emotion-xupvk

Upvotes: 3

Related Questions