CODEWITHSUNDEEP
cssreactjsflexbox
Mickael Zana
Mickael Zana

Reputation: 331

How can I position one flex item at each end of a row?

Top Menu

Hello, i have a basic top bar navigation with 2 items , i want to fix the first item to the left and the second to right , for that i tried to use Flexbox , here is my css code :

.ant-menu{
display: flex ;
flex-direction: row ;
background-color: red;
}

.ant-menu .logo {
align-self: flex-start;
float: left ;
margin-right: 400px;
}

.ant-menu .account{
align-self: flex-end;
float: right ;
}

And here my component :

class AntdTopMenu extends React.Component {
state = {
    current: 'mail',
};

handleClick = e => {
    console.log('click ', e);
    this.setState({
        current: e.key,
    });
};

render() {
    return (
        <Menu onClick={this.handleClick} selectedKeys={[this.state.current]} mode="horizontal">

                <Menu.Item className='logo' key="logo">
                    Home
                </Menu.Item>
                <Menu.Item  className='account' key="account" >
                    My Account
                </Menu.Item>

        </Menu>
    );
 }
}

export default AntdTopMenu;

Upvotes: 0

Views: 5285

Answers (2)

symlink
symlink

Reputation: 12208

Use justify-content:space-between. You can also give an item inside a flexbox a margin-left:auto to push it all the way to the right:

.flex {
  display: flex;
  background: red;
  justify-content: space-between;
  padding: 5px;
}

a {
  text-decoration: none;
  color: #fff;
  font-family: Arial;
}
<div class="flex">
  <a href="#">Home</a>
  <a href="#">My Account</a>
</div>

Upvotes: 0

Michael Benjamin
Michael Benjamin

Reputation: 372109

If you're in flex-direction: row, then use justify-content. The align-* properties would apply to the vertical axis (the cross axis).

.ant-menu{
   display: flex;
   flex-direction: row ;
   background-color: red;
   justify-content: space-between; /* or space-around */
}

You can also use auto margins on the items (full explanation).

Also, floats don't work in a flex container.

Upvotes: 4

Related Questions