flex-direction property not working in react css-CodePudding

I am trying to make a billbook app from scratch in react...i am stuck in this error that flex-direction just won't work Here is my app.js :

import { React } from "react";
import "./App.css";

function App() {
    return (
        <div>
            <div className="header">
                <div className="header__left">Company Electronics Address: XXXXXXXXXX
            XXXXXXXXXXXX
            XXXXXXXXXXX,
                        XXXXXXXXXX</div>
                <div className="header__right">
                    <div className="header__right__top"></div>
                    <div className="header__right__middle"></div>
                    <div className="header__right__bottom"></div>
                </div>
            </div>
        </div>
    );
}

export default App;

And in my app.css i have :

html {
    width: 100%;
    height: 100vh;
}

.header {
    display: flex;
    width: 100%;
    height: 15vh;
    border: 3px solid black;
}

.header__left,
.header__right {
    display: flex;
    width: 50vw;
}
.header__right {
    border-left: 1.5px solid black;
    display: flex;
    flex-direction: row;
}

.header__left {
    font-weight: 550;
    font-size: 2.1vh;
}

.header__right__top,
.header__right__middle,
.header__right__bottom {
    display: flex;
    flex-direction: row;
    text-align: center;
    width: 100%;
    height: 100/3%;
    border: 3px solid black;
}

i have flex-direction in both element and parent div but i am still unable to resolve this... Thanks in advance

CodePudding user response：

If you want the header__right__top , middle and bottom divs aligned in vertical direction, try changing the css of header__right class as follows

.header__right {
    flex-direction: column;
}

this will change the direction of its children vertically.

Also, you do not need to write flex-direction: row as it is the default value for this property.

Also, you can look at the related docs from the link below:

https://www.w3schools.com/cssref/css3_pr_flex-direction.asp

CodePudding user response：

Replace flex-direction: row; with flex-direction: column;