Is there a way to align three items in a Navbar (left, right, and middle)?-CodePudding

so I am trying to achieve this look in ReactJS and CSS. Here is the code:

    export default function Navbar() {
    return (
        <div className={styles.container}>
            <p className={styles.navLogo}>shopr</p>
            <div className={styles.navSearchBar}>
                <input type='text' className={styles.searchBarInput} />

            </div>
            <div className={styles.navProfileShoppingContainer}>
                <a>
                    <Image
                    src={ProfileIcon}
                    height={35}
                    width={35}
                    alt="profileIcon" 
                    />
                </a>
                <a>
                    <Image
                    src={ShoppingCartIcon}
                    height={32}
                    width={40}
                    alt='searchIcon'
                    />
                </a>
            </div>
        </div>
    )
}

Here is the css:

.container {
    display: flex;
}

.navProfileShoppingContainer {
    float: right;
    background-color: #E5B3B3;
    padding: 5px;
    justify-content: center;
    border-radius: 10px;
    width: 130px;
    height: 50px;
}

.navProfileShoppingContainer a {
    margin: 10px;
}

.navLogo {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 36px;
    line-height: 48px;
    color: #CF7E7E;
    
}

And this is the look I'm trying to achieve vs how it looks The main problem I'm having is with flex as float doesn't work with it on a parent div. ~ Any help would be much appreciated. Thanks!

CodePudding user response：

What I always do is create three sections in the navbar. This would look something like this:

<div className={styles.container}>
    <div className={styles.left}>
       // Content here
    </div>
    <div className={styles.middle}>
       // Content here
    </div>
    <div className={styles.right}>
       // Content here
    </div>
</div>

your CSS would look like this.

.container {
  display: flex;
}

.left {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.middle { 
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.right {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

By using flex: 1 we create three equally sized boxes inside the container. You can style all boxes differently depending on your preferences.

CodePudding user response：

Just add align-items: center; and justify-content: space-between; to the container

CodePudding user response：

export default function Navbar() {
return (
    <div className={styles.container}>
        <div className={styles.navLogo}>shop</div>
        <div className={styles.navSearchBar}>
            <input type='text' className={styles.searchBarInput} />

        </div>
        <div className={styles.navProfileShoppingContainer}>
            <div><a>
                <Image
                src={ProfileIcon}
                height={35}
                width={35}
                alt="profileIcon" 
                />
            </a></div>
            <div><a>
                <Image
                src={ShoppingCartIcon}
                height={32}
                width={40}
                alt='searchIcon'
                />
            </a></div>
        </div>
    </div>
)

}

CodePudding user response：

.container {
    display: flex;
}
.navProfileShoppingContainer {
    display:flex;
    float: right;
    background-color: #E5B3B3;
    gap : 30px
    justify-content: center;
    border-radius: 10px;
    width: 130px;
    height: 50px;
}
.navLogo {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 36px;
    line-height: 48px;
    color: #CF7E7E;
    
}