javascript - 在 Rails 应用程序的移动尺寸屏幕中将图像导航元素对齐为 2 行

Question

我的 Rails 网络应用程序中有导航栏。我试图让它在移动屏幕上负责，但我无法实现我想要的。下面是它在桌面屏幕上的正常显示图像。

当我用 iphone5 和 iphone6 尺寸查看时，它看起来像下面这样。 Logo 图像在左侧，导航项在右侧。

我想让所有内容都居中并使用全宽均匀拉伸(stretch)导航项，如下所示:

下面是我的html代码:

<header class="page-header--transparent">
  <div>
        <a href="/" class="page-header-logo">
            <%= image_tag("logo-green.svg") %>
        </a>
    </div>
        <nav class="page-header-nav">
            <%= link_to 'Login', new_user_session_path, :class => "page-header--transparent-nav-item" %>
            <%= link_to 'Get Started', new_user_registration_path, :class => "page-header--transparent-nav-item" %>
            <%= link_to 'Contact', '/contact', :class => "page-header--transparent-nav-item" %>
        </nav>
</header>

下面是CSS代码:

.page-header--transparent {
    background-color: transparent;
    box-shadow: none;
    padding: 12px 20px;
}

.page-header-nav {
  float: right;
}

.page-header--transparent-nav-item {
    display: inline-block;
    border-bottom: 1px solid transparent;
    text-decoration: none;
    color: #757575;
    padding: 8px 17px;
    -webkit-font-smoothing: antialiased;
    transition: all ease-in-out 1s;
}

.page-header-logo {
  display: block;
  float: left;
  padding: 0 12px;
}

@media (max-width: 500px) {
    .page-header--transparent-nav-item {
        padding: 15px 10px;
    }

    .page-header--transparent {
        background-color: #ffffff;
        box-shadow: none;
        padding: 12px 20px;
    }
}

如果有人能给我建议就太好了!!

Answer 1

.c {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.logo {
  width: 100px;
  height: 100px;
  background: yellow;
  text-align: center;
}
.menu {
  display: flex;
  flex-direction: row;
  flex: 1;
  background: green;
}
.menu .m {
  flex: 1;
  text-align: center;
}
@media (max-width: 500px) {
  .c {
    display: block;
  }
  .logo {
    width: 100%;
  }
  .menu {
    width: 100%;
  }
}

<div class="c">
  <div class="logo">logo</div>
  <div class="menu">
    <div class="m">menu1</div>
    <div class="m">menu2</div>
    <div class="m">menu3</div>
  </div>
</div>

使用 flex 更新