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

Question

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

徽标应位于 header
已登录：管理员应出现在同一行并右对齐
在它们下面，注销按钮也应该与右侧对齐。

我正在使用 vaadin，它允许我编写 css，我决定我可以使用 flex 显示来做到这一点，但我无法让它工作，我该如何实现？

我现在的 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;
    }
}

Answer 1

我会使用 justify-content:

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

然后，在 CSS 内：

.flex {
display: flex;
flex-direction: column;
}

.top {
display: flex;
justify-content: space-between;
}

.bottom {
display: flex;
justify-content: flex-end;
}

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

Different Number of items in flex rows with css layout

css

css-selectors

vaadin

flexbox