This is my mockup I made in Figma:

This is what it looks like right now:

Here is my (S)CSS (react code) for the webpage layout:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');

* {
    margin: 0;
    font-family: 'Poppins';
    font-weight: normal;
    overflow-x: hidden;
    -ms-overflow-style: none;
    scrollbar-width: 0.1em;
}


*::-webkit-scrollbar {
    display: none;
}

.mainContent {
    display: flex;
    flex-direction: row;
}

.cardLinks {
    display: inline-flex;
    gap: 120px;
    margin-left: 2em;
    margin-top: 2em;
}

.userStats-container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-top: 80px;
}

And here is the ReactJS Code (basically just HTML) for the layout:

<div className="mainContent">
            <SNavbar />
            <div className="content">
                <Title
                    title="Hey, welcome back"
                    subtitle="Some quick actions for you:"
                    name="Henry Sargeant"
                />

                <div className="cardLinks">
                    <CardLink
                        text="Lookup a Pupil"
                        link="#"
                        svgAltText="Lookup Pupil Image"
                        svg="lookupPupilCard"
                    />
                    <CardLink
                        text="Manage Admins"
                        link="#"
                        svgAltText="Manage Admins Image"
                        svg="manageAdminsBlack"
                    />
                    <CardLink
                        text="Manage Users"
                        link="#"
                        svgAltText="Manage Users Image"
                        svg="manageUsersBlack"
                    />
                    <CardLink
                        text="Lookup a Pupil"
                        link="#"
                        svgAltText="Lookup a Pupil Image"
                        svg="lookupPupilsBlack"
                    />
                    <CardLink
                        text="View Error Logs"
                        link="#"
                        svgAltText="View Error Logs Image"
                        svg="warnBlack"
                    />
                </div>

                <div className="userStats-container">
                    <UserStats />
                    <CurrentAdmins admins={adminList} />
                    <StaffMembers staff={staff} />
                </div>

                <div className="switchstaffbtn">
                    <SwitchButton />
                </div>
            </div>
        </div>

I am trying to make it so that the 3 things in the userstats-container all are spaced away from each other horizontally equally.

I have tried flexbox and then justify-content: space-between; but it doesn't seem to work. Any ideas?

CodePudding user response：

try align-content: space-between

CodePudding user response：

Here are few things you can try out..

1. Check if the parent container userStats-container has enough width to accommodate the spaces in between. (or give it a 100% width)
2. Check the widths of the children and make sure that it is fixed (ie. not stretched as per the container size)
3. By default flex-direction is row, so that can be avoided.

CodePudding user response：

The one thing I can think of here is that to check the width using the inspector of the userstats-Container make sure it is occupying 100% width of the parent component i.e mainContent. Also, flex-direction is default set to row, so you don't need to write that extra property

    .userStats-container {
    display: flex;
    width:100%;
    justify-content: space-around;
    margin-top: 80px;
}