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

【问题标题】：Different Number of items in flex rows with css layout具有css布局的flex行中的不同项目数
【发布时间】：2021-03-12 08:06:47
【问题描述】：

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

徽标应位于标题的左上角
登录：admin 应该出现在同一行并右对齐
在它们下方，注销按钮也应与右侧对齐。

我正在使用 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 代码...
没有 html，这是一种 java 技术，允许您为项目嵌入 css，并且项目在 css 中命名为上面的名称
但是我们不能不检查代码就做 CSS。有任何实时链接或其他任何东西吗？

标签： css flexbox css-selectors vaadin

【解决方案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;
}

【讨论】：