具有css布局的flex行中的项目数不同

在我的应用程序的移动版本中，我有以下标题布局项。应用程序徽标、“登录”文本、用户名和注销按钮。我想要的是

徽标应位于标题的左上方

登录：管理员应显示在同一行上，并右对齐

在它们下面，注销按钮也应该与右侧对齐

我使用的是vaadin，这使我能够编写css，我决定我可以用flex display实现这一点，但我无法让它工作，我如何实现它

我当前的css如下所示：

/* On screens that are 600px or less, set the background color to olive */
@media screen and (max-width: 600px) {
    .header-layout {
        display: flex;
        flex-direction: column;
    }
    .logo {
        flex: 1;
        align-self: flex-start;
    }
    .application-name {
        display: none
    }
    .admin-text {
        flex: 0 50%;
    }
    .user-name {
    flex: 0 50%;
    }
    .logout-button {
        flex: 0.5;
        margin-bottom: 20px;
    }
}

我将使用：

在

html

中，将所有内容包装在一个名为

flex

的div中，然后在

top

和

bottom

中拆分这两个区域：

<div class="flex">
  <div class="top">
    `Here insert the logo and logged in`
  </div>
  <div class="bottom">
    `Here insert logout button`
  </div>
</div>

我将使用：

在

html

中，将所有内容包装在一个名为

flex

的div中，然后在

top

和

bottom

中拆分这两个区域：

<div class="flex">
  <div class="top">
    `Here insert the logo and logged in`
  </div>
  <div class="bottom">
    `Here insert logout button`
  </div>
</div>

---

提供HTML代码…没有HTML，这是一种java技术，允许您为项目嵌入css，项目在css中以上面的名称命名，但我们不能在不检查代码的情况下执行css。有任何实时链接或其他内容吗？提供HTML代码…没有HTML，这是一种java技术，允许您为项目嵌入css，项目在css中命名，但如果不检查代码，我们无法执行css。是否有任何实时链接或其他内容？