Как я могу расположить один гибкий элемент на каждом конце ряда?

Question

Здравствуйте, у меня есть базовая c верхняя панель навигации с 2 элементами, я хочу зафиксировать первый элемент слева и второй справа, для этого я попытался использовать Flexbox, вот мой css код:

.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 ;
}

А вот мой компонент:

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;

Answer 1

Если вы в flex-direction: row, тогда используйте justify-content. Свойства align-* будут применяться к вертикальной оси (поперечная ось).

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

Вы также можете использовать auto поля для элементов ( полное объяснение ).

Кроме того, поплавки не работают в гибком контейнере .

Answer 2

Используйте justify-content:space-between. Вы также можете отдать предмет внутри флексбокса от margin-left:auto до pu sh до вправо:

.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>