如何在一行的两端各定位一个flex项目?

Top Menu

你好,我有一个基本的顶栏导航与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;

解决方案:

如果你在 flex-direction: row,然后用 justify-content. 该 align-* 属性将应用于垂直轴(十字轴)。

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

您也可以使用 auto 项目的边距(详解).

还有 浮动在弹性容器中不起作用。.

给TA打赏
共{{data.count}}人
人已打赏
未分类

.weekday返回错误日期的最简洁的修复方法

2022-9-8 6:03:17

未分类

在vue中显示歌曲的当前时间

2022-9-8 6:03:19

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索