具有 3 div 秒的布局。我怎样才能使中间 div 保持在其他两个下方？

Question

我正在寻找一种方法来制作像这样的响应式设计我在 parent div

中有 3 divs

<div style="display: flex">
  <div class="logo">some image here</div>

  <div class="menu-items">
    <a href="/home">Home</a>
    ...
  </div>

  <div class="login-logout">Here is the login component</div>
</div>

如何仅使用 css 和 sass 来制作类似这样的响应版本？

<div style="display: flex; flex-direction: column">
  <div style="display: flex">
    <div class="logo">some image here</div>

    <div class="login-logout">Here is the login component</div>
  </div>

  <div class="menu-items">
    <a href="/home">Home</a>
    ...
  </div>
</div>

我希望中间的 div 保持在其他两个下方

我猜测这可以使用网格布局实现，但老实说我不太了解它并且更喜欢使用 flex。因此，如果可以使用 flex 实现这一点，我将不胜感激

编辑：我希望布局的图像。

Answer 1

flex 基本上是一维的，而 grid 允许二维布局。

此代码段采用您的代码，但将容器设置为显示网格。

grid-template 区域以 2/3/1 的比例布置在较宽的屏幕上，在顶行中以 2/1 的比例布置在较窄的屏幕上。

显然您需要设置适合您特定情况的相对大小。

.container {
  width: 100vw;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-areas: 'logo logo menu menu menu login';
  gap: 2vw;
  padding: 2vw;
  box-sizing: border-box;
}

.container>* {
  border: 3px solid;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .container {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: 'logo logo login' 'menu menu menu';
  }
}

.logo {
  grid-area: logo;
}

.menu-items {
  grid-area: menu;
}

.login-logout {
  grid-area: login;
}


/* borders added fordemo */

.logo {
  border-color: red;
}

.menu-items {
  border-color: blue;
}

.login-logout {
  border-color: green;
}

<div class="container">
  <div class="logo">some image here</div>

  <div class="menu-items">
    <a href="/home">Home</a> ...
  </div>

  <div class="login-logout">Here is the login component</div>
</div>

具有 3 div 秒的布局。我怎样才能使中间 div 保持在其他两个下方？

Having a 3 divs layout. How can I make the middle div to stay below the other two?

css

layout

sass