在移动屏幕导航上移动 flexbox 项目答案

【问题标题】：Move flexbox items on a mobile screen navigation在移动屏幕导航上移动 flexbox 项目
【发布时间】：2021-06-05 07:04:39
【问题描述】：

我目前正在做一个响应式登录页面，它有一个最大宽度为 320 像素的媒体查询，可以针对移动设计进行更改。

我在移动顶部移动导航右侧的菜单图标、关闭图标和复选框时遇到了一些问题。我使用了 flexbox justify-self 和 justify-content 来尝试移动它们，但没有成功。我希望最终得到您在以下屏幕截图中看到的内容： How the mobile menu should look

这是我的代码：

@charset "UTF-8";

@font-face {
  font-family: "IBM Plex Mono Regular", monospace;
  src: url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap");
}

/*  IBM Plex sans REGULAR  */
@font-face {
  font-family: "IBM Plex Sans Regular", sans-serif;
  src: url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap");
}

/*  IBM Plex Mono MEDIUM  */
@font-face {
  font-family: "IBM Plex Mono Medium", monospace;
  src: url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500&display=swap");
}

/*  IBM Plex sans Semi Bold  */
@font-face {
  font-family: "IBM Plex Sans Semi Bold", sans-serif;
  src: url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@600&display=swap");
}

/*TAMAÑOS*/
/*COLORES*/
/*--------------------------------------------------------------------------------*/
/*normalizadores*/
* {
  margin: 0;
  padding: 0;
  border: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/*BODY*/
body {
  max-width: 1440px;
  background-color: #ffffff;
}

/*HEADER con NAV y menu hamburguesa*/
.nav_mobile {
  display: none;
}

.nav_desktop {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.nav_desktop .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  height: 80px;
  width: 100%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.nav_desktop .container .logo_desktop {
  width: 36px;
  height: 36px;
  margin-left: 100px;
}

.nav_desktop .container .nav_list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-decoration: none;
  list-style-type: none;
}

.nav_desktop .container .nav_list .nav_item {
  font-family: "IBM Plex Mono Regular", monospace;
  line-height: 28px;
  letter-spacing: 0;
  text-decoration: none;
  color: #060a24;
  padding-right: 28px;
  margin-bottom: 20px;
  margin-top: 20px;
}

/*Para version mobile*/
@media only screen and (max-width: 320px) {
  .nav_desktop {
    display: none;
  }
  .nav_mobile {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .nav_mobile .dropdown_menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    height: 44px;
    width: 100%;
  }
  .nav_mobile .dropdown_menu .logo_mobile {
    margin-left: 16px;
    height: 24px;
    width: 24px;
  }
  .nav_mobile .dropdown_menu #checkbox {
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 40px;
    height: 32px;
  }
  .nav_mobile .dropdown_menu #checkbox input[type="checkbox"]:checked ~ ul {
    height: 224px;
  }
  .nav_mobile .dropdown_menu #icon_menu {
    position: absolute;
  }
  .nav_mobile .dropdown_menu #icon_close {
    position: absolute;
  }
  .nav_mobile .dropdown_menu ul {
    background: #0000ec 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    position: absolute;
    top: 44px;
    width: 100%;
  }
  .nav_mobile .dropdown_menu ul li {
    position: relative;
    margin-bottom: 24px;
    margin-left: 16px;
    list-style-type: none;
  }
  .nav_mobile .dropdown_menu ul li a {
    font-family: "IBM Plex Mono Regular", monospace;
    text-decoration: none;
    line-height: 28px;
    color: #ffffff;
  }
  .nav_mobile .dropdown_menu ul li:first-child {
    margin-top: 16px;
  }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="./styles/styles.css" />
    <script
      src="https://kit.fontawesome.com/e16c5e6974.js"
      crossorigin="anonymous"
    ></script>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Landing Podcast</title>
  </head>
  <body>
    <header>
      <nav class="nav_desktop">
        <div class="container">
          <img src="./images/logo.svg" alt="Logo" class="logo_desktop" />
          <ul class="nav_list">
            <li class="nav_item"><a class="nav_item" href="#">EPISODIOS</a></li>
            <li class="nav_item"><a class="nav_item" href="#">NOSOTROS</a></li>
            <li class="nav_item">
              <a class="nav_item" href="#">ENTREVISTAS</a>
            </li>
            <li class="nav_item"><a class="nav_item" href="#">TÓPICOS</a></li>
          </ul>
        </div>
      </nav>
      <nav class="nav_mobile">
        <div class="dropdown_menu">
          <img src="./images/logo.svg" alt="Logo" class="logo_mobile" />
          <i class="fas fa-bars" id="icon_menu"></i>
          <i class="fas fa-times" id="icon_close"></i>
          <input type="checkbox" id="checkbox" />
          <ul>
            <li><a href="#">Item1</a></li>
            <li><a href="#">Item2</a></li>
            <li><a href="#">Item3</a></li>
            <li><a href="#">Item4</a></li>
          </ul>
        </div>
      </nav>
    </header>
  </body>
</html>

任何形式的帮助都将不胜感激。

提前谢谢你。

【问题讨论】：

标签： html css sass responsive-design

【解决方案1】：

只是在这里猜测一下，这与您要查找的内容相符。您可以使用一点 JavaScript 在移动视图中完成下拉菜单。我冒昧地摆脱了您的复选框并添加了一些 JS 来为您的导航窗口添加功能。您首先遇到的问题不是 flexbox，而是您使用 position。阅读有关如何使用position 的更多信息可能会有所帮助。

const menu = document.getElementById('icon_menu');

// open nav
menu.addEventListener('click', () => {
  const ul = document.querySelector('.dropdown_menu ul');
  const close = document.getElementById('icon_close');
  ul.style.display = 'block';
  menu.style.display = 'none';
  close.style.display = 'block';
});

//close nav
const close = document.getElementById('icon_close');
close.addEventListener('click', () => {
  const ul = document.querySelector('.dropdown_menu ul');
  ul.style.display = 'none';
  menu.style.display = 'block';
  close.style.display = 'none';
});

* {
  margin: 0;
  padding: 0;
  border: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/*BODY*/
body {
  max-width: 1440px;
  background-color: #ffffff;
}

/*HEADER con NAV y menu hamburguesa*/
.nav_mobile {
  display: none;
}

.nav_desktop {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.nav_desktop .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  height: 80px;
  width: 100%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.nav_desktop .container .logo_desktop {
  width: 36px;
  height: 36px;
  margin-left: 100px;
}

.nav_desktop .container .nav_list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-decoration: none;
  list-style-type: none;
}

.nav_desktop .container .nav_list .nav_item {
  font-family: "IBM Plex Mono Regular", monospace;
  line-height: 28px;
  letter-spacing: 0;
  text-decoration: none;
  color: #060a24;
  padding-right: 28px;
  margin-bottom: 20px;
  margin-top: 20px;
}

/*Para version mobile*/
@media only screen and (max-width: 320px) {
  .nav_desktop {
    display: none;
  }
  .nav_mobile {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .nav_mobile .dropdown_menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    height: 44px;
    width: 100%;
  }
  .nav_mobile .dropdown_menu .logo_mobile {
    margin-left: 16px;
    height: 24px;
    width: 24px;
  }
  .nav_mobile .dropdown_menu  {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 32px;
  }
  .nav_mobile .dropdown_menu #checkbox input[type="checkbox"]:checked ~ ul {
    height: 224px;
  }
  
  i[id='icon_menu']{
    margin-left: auto;
    margin-right: 10px;
  }
  i[id="icon_close"]{
    display: none;
    margin-left: auto;
    margin-right: 10px;
  }

  .nav_mobile .dropdown_menu ul {
    display: none;
    background: #0000ec 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    position: absolute;
    top: 44px;
    width: 100%;
  }
  .nav_mobile .dropdown_menu ul li {
/*     position: relative; */
    margin-bottom: 24px;
    margin-left: 16px;
    list-style-type: none;
  }
  .nav_mobile .dropdown_menu ul li a {
    font-family: "IBM Plex Mono Regular", monospace;
    text-decoration: none;
    line-height: 28px;
    color: #ffffff;
  }
  .nav_mobile .dropdown_menu ul li:first-child {
    margin-top: 16px;
  }
  
}

  <head>
    <link rel="stylesheet" href="./styles/styles.css" />
    <script
      src="https://kit.fontawesome.com/e16c5e6974.js"
      crossorigin="anonymous"
    ></script>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Landing Podcast</title>
  </head>
  <body>
    <header>
      <nav class="nav_desktop">
        <div class="container">
          <img src="./images/logo.svg" alt="Logo" class="logo_desktop" />
          <ul class="nav_list">
            <li class="nav_item"><a class="nav_item" href="#">EPISODIOS</a></li>
            <li class="nav_item"><a class="nav_item" href="#">NOSOTROS</a></li>
            <li class="nav_item">
              <a class="nav_item" href="#">ENTREVISTAS</a>
            </li>
            <li class="nav_item"><a class="nav_item" href="#">TÓPICOS</a></li>
          </ul>
        </div>
      </nav>
      <nav class="nav_mobile">
        <div class="dropdown_menu">
          <img src="./images/logo.svg" alt="Logo" class="logo_mobile" />
          <i class="fas fa-bars" id="icon_menu"></i>
          <i class="fas fa-times" id="icon_close"></i>
          <ul>
            <li><a href="#">Item1</a></li>
            <li><a href="#">Item2</a></li>
            <li><a href="#">Item3</a></li>
            <li><a href="#">Item4</a></li>
          </ul>
        </div>
      </nav>
    </header>
  </body>

【讨论】：

你好，我还不知道 javascript，所以我试图用 CSS 和 HTML 来做这个。但是，据我了解，我可以阅读您对 JS 所做的事情，当您单击菜单徽标时， ul 将显示为一个块，菜单图标将消失并出现关闭图标。我肯定会阅读更多关于位置使用的信息，因为我仍然不完全理解你做了什么，据我所知，与我的唯一区别是评论的位置：列表项中的相对，你能解释一下吗多一点你做了什么？非常感谢您的帮助！