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

Question

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;

Michael Benjamin · Accepted Answer · 2020-04-23T15:55:03.820

4

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.

edited Apr 23 '20 at 15:55

answered Apr 23 '20 at 15:52

Michael Benjamin

346,931
104
581
701

yeah but i dont want to use space-between property but i want to align items to the same line and to fix 1st item to the left and the 2nd to the right – Mickael Zana Apr 23 '20 at 15:54
2

That's what `space-between` does. What's the problem with it? – isherwood Apr 23 '20 at 15:55

score 0 · Answer 2 · answered Apr 23 '20 at 15:57

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>

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

2 Answers2