java - 如何在AppLayout中向Navbar添加组件范围权？

我MainView的extends AppLayout。
我想在导航栏的左侧填充徽标，并在导航栏的右侧填充用户ID。
不幸的是，我尝试的所有操作都以绑定到左侧的两个组件结束。

导航栏目标：


  |图片
  -------------------------------------------------- -------------------------------------------------- ----用户名|


示例代码（与Vaadin 14 Image和字符串相同的结果）：

public class MainView extends AppLayout
...

private void setupNavigationBar() {
    Div a = new Div();
    a.setText("Foo");
    a.getStyle().set("flex-flow", "flex-start");

    Div b = new Div();
    b.setText("Bar");
    b.getStyle().set("flex-flow", "flex-end");
    addToNavbar(a, b);
}

导航栏结果：


  | FooBar
  -------------------------------------------------- -------------------------------------------------- -------------- |


这是什么问题？为什么flex-flow不起作用？我已经尝试将其包装在HorizontalLayout中，这也无法正常工作。

最佳答案

我在这里How to align flexbox columns left and right?找到了类似的情况，并且解决方案似乎对您来说很有效：

@Route("custom-appLayout")
public class CustomAppLayout extends AppLayout {
    public CustomAppLayout(){
            Image img = new Image("https://i.imgur.com/GPpnszs.png", "Vaadin Logo");
            img.setHeight("44px");
            addToNavbar(new DrawerToggle(), img);
            Tabs tabs = new Tabs(new Tab("Home"), new Tab("About"));
            tabs.setOrientation(Tabs.Orientation.VERTICAL);
            addToDrawer(tabs);
            addToNavbar(img);

            Div b = new Div();
            b.setText("Bar");
            b.getStyle().set("margin-left", "auto");
            b.getStyle().set("padding", "15px");
            addToNavbar(b);
    }
}

我添加了padding，因为否则Bar太接近结尾了，但是您可以在此处设置任何所需的值。
这是这样的：


我使用过的链接：


A Complete Guide to Flexbox这是我最喜欢的关于flexbox的文章。当想要检查某些东西时，我几乎总是在寻找它：)
AppLayout official docs。从那里获取存根代码片段