在列弯曲方向内使用行弯曲方向

Question

In this component, I have an image at the top and then other components at the bottom that appear as different rows.

    <main className='content'>
    <img src={poly} alt="charts" className="charts" />
    <div className="heading">
    Heading Text
    </div>
    <span> The he text goes here. </span>
      <div className="popup">
  <Popup/> 
  </div >
  <div className="regressionSetup">
    <ItemsContainer/>
    </div>
      </main>

.content{
    padding-left: 260px;
    padding-top: 100px;
    display: flex;
    flex-direction: column;
    background-color: white;
}

.popup{
    padding-bottom: 20px;
}

.charts{
    align-self: center;
    height: 350px;
    width: 800px;
}

.heading{
    font-size: 25px;

}

.regressionSetup{
    flex-direction: row;
}

The component further has two components: a grid and a chart that appears below the grid. I want the grid and chart to appear in the same line. I tried adding flex-direction: row to className="regressionSetup" but it did not work.

ItemsContainer:

        return(
            <div className="container-fluid pt-4">
                <div className="row justify-content-center">
                    <div className="col-12 col-sm-12 col-md-12 col-lg-4 ">
                        <PointDrawer addCoord={this.addCoord.bind(this)} resetCoords={this.resetCoords.bind(this)}/>
                        <RegressionSetup
  order_graph_1={this.state.order_graph_1}
  order_graph_2={this.state.order_graph_2}
  setOrders={(orders: any) => this.setState(orders)}
/>
                    </div>
                    <div className="col-12 col-sm-12 col-md-12 col-lg-8">
                        <Graph x={this.state.x_array} y={this.state.y_array} deg={this.state.order_graph_1} width={800} color={this.color_graph_1} />
                    </div>
                </div>
            </div>
            
        );

How can I change this such that the grid appears on the left and the chart appears on the right but in the same line?

Answer 1

I think you forgot to add display: flex before adding flex-direction without it flex-direction will not work

Answer 2

It's not .regressionSetup that is going to make the items appear on the same row so there is no need to have flex-direction on this class. It is <div className="row justify-content-center"> in your ItemsContainer that will because that is where the row is.

I could only suggest that your screen is at a breakpoint that has the columns at full width instead of 1/3 and 2/3 which occurs are large screen size as defined in your bootstrap classes.