Блог

Главная - Вопросы по программированию - Не удается сделать меню навигационной панели гибким-направление: столбец

Не удается сделать меню навигационной панели гибким-направление: столбец

#html #css #flexbox

#HTML #css #flexbox

Вопрос:

Я думаю, проблема в том, как я создал элемент «контейнер», он не позволяет меню в навигационной панели расширяться в столбце. Я попытался удалить каждый элемент высоты, даже прокомментировал весь контейнер, но все равно ничего.

Я хочу преобразовать класс «menu» в медиа-запросе в гибкое направление: столбец

 @import url("https://fonts.googleapis.com/css2?family=Abril Fatfaceamp;display=swap");
* {
  margin: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
  color: #070707;
}

main {
  max-width: 1200px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.nav-bar {
  display: flex;
  justify-content: space-around;
  max-width: 1200px;
  margin: auto;
  position: relative;
  align-items: center;
  margin-top: 1.5rem;
  height: 100%;
}

.menu>a:hover {
  font-size: 1.5rem;
}

.card-h1 {
  display: flex;
  justify-content: center;
}

.menu,
.logo {
  font-weight: 500;
  font-size: 1.4rem;
  font-family: "Abril Fatface", cursive;
}


/* .logo {
  font-size: 1.5rem;
} */

.menu {
  width: 25vh;
  display: flex;
  justify-content: space-between;
}


/* Hamburger menu */

.menu-button {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 21px;
}

.menu-button .bar {
  height: 3px;
  width: 100%;
  background-color: #070707;
  border-radius: 10px;
}


/* Main Container */

.container {
  display: flex;
  height: 60vh;
  width: 1200px;
  margin: auto;
  justify-content: space-between;
  align-items: center;
}

.section1,
.section2,
.section3 {
  margin: 20px;
  width: 33.3333%;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
  /* Layered Box Shadow */
  /* box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.12),
    0 4px 4px rgba(0, 0, 0, 0.12), 0 8px 8px rgba(0, 0, 0, 0.12),
    0 16px 16px rgba(0, 0, 0, 0.12); */
}

h1,
p {
  font-family: "PT Serif", serif;
}

h1 {
  font-size: 2rem;
}

p {
  font-size: 0.8rem;
  padding: 30px;
}

.footer {
  height: 5vh;
  display: flex;
  justify-content: center;
}

.copywright {
  padding: 20px;
  font-weight: 400;
  font-size: 0.6rem;
}

@media (max-width: 640px) {
  .nav-bar {
    width: 80vw;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .menu-button {
    display: flex;
  }
  .menu {
    display: flex;
    /* display: none; */
  }
  .menu>a {
    display: flex;
    flex-direction: column;
  }
  .footer {
    position: absolute;
    bottom: 1rem;
    right: 30%;
    display: flex;
  }
  .container {
    display: flex;
    flex-direction: column;
    width: 80vw;
    margin: auto;
  }
  .section1,
  .section2,
  .section3 {
    width: 80vw;
    padding: 0;
    margin: 0.5rem;
  }
}  
 <body>
  <header>
    <div class="nav-bar">
      <div class="logo">
        <a href="index.html">andyprv.dev</a>
      </div>
      <a href="#" class="menu-button">
        <span class="bar"></span>
        <span class="bar"></span>
        <span class="bar"></span>
      </a>
      <div class="menu">
        <a href="https://github.com/andreiprv" target="blank">my.work</a>
        <a href="">contact.me</a>
      </div>
    </div>
  </header>

  <main>
    <div class="container">
      <div class="section1">
        <div class="card-h1">
          <h1 class="title1">Title Text</h1>
        </div>
        <div class="card-p">
          <p class="sub-title1">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga porro suscipit voluptatem! Modi placeat beatae porro, id ut maxime veritatis suscipit maiores assumenda dolores. Illum animi provident quae eos voluptate!
          </p>
        </div>
      </div>

      <div class="section2">
        <div class="card-h1">
          <h1 class="title2">Title Text</h1>
        </div>
        <div class="card-p">
          <p class="sub-title2">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga porro suscipit voluptatem! Modi placeat beatae porro, id ut maxime veritatis suscipit maiores assumenda dolores. Illum animi provident quae eos voluptate!
          </p>
        </div>
      </div>

      <div class="section3">
        <div class="card-h1">
          <h1 class="title3">Title Text</h1>
        </div>
        <div class="card-p">
          <p class="sub-title3">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga porro suscipit voluptatem! Modi placeat beatae porro, id ut maxime veritatis suscipit maiores assumenda dolores. Illum animi provident quae eos voluptate!
          </p>
        </div>
      </div>
    </div>
  </main>
  <div class="footer">
    <div class="footer-last">
      <p class="copywright">Created by Andrei Ionescu 2020</p>
    </div>
  </div>
</body>

Заранее благодарю вас!

Ответ №1:

Если я правильно понимаю, вы хотите, чтобы ваши пункты меню были вертикальными, когда стили медиа-запросов активны.

Я думаю, ваша проблема заключалась в том, что вы устанавливали flex-direction: column пункты меню ( .menu a ), а не само меню:

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

Вот пример фрагмента, запустите его в полноэкранном режиме и отрегулируйте размер окна, чтобы проверить поведение:

 @import url("https://fonts.googleapis.com/css2?family=Abril Fatfaceamp;display=swap");
* {
  margin: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
  color: #070707;
}

main {
  max-width: 1200px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.nav-bar {
  display: flex;
  justify-content: space-around;
  max-width: 1200px;
  margin: auto;
  position: relative;
  align-items: center;
  margin-top: 1.5rem;
  height: 100%;
}

.menu>a:hover {
  font-size: 1.5rem;
}

.card-h1 {
  display: flex;
  justify-content: center;
}

.menu,
.logo {
  font-weight: 500;
  font-size: 1.4rem;
  font-family: "Abril Fatface", cursive;
}


/* .logo {
  font-size: 1.5rem;
} */

.menu {
  width: 25vh;
  display: flex;
  justify-content: space-between;
}


/* Hamburger menu */

.menu-button {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 21px;
}

.menu-button .bar {
  height: 3px;
  width: 100%;
  background-color: #070707;
  border-radius: 10px;
}


/* Main Container */

.container {
  display: flex;
  height: 60vh;
  width: 1200px;
  margin: auto;
  justify-content: space-between;
  align-items: center;
}

.section1,
.section2,
.section3 {
  margin: 20px;
  width: 33.3333%;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
  /* Layered Box Shadow */
  /* box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.12),
    0 4px 4px rgba(0, 0, 0, 0.12), 0 8px 8px rgba(0, 0, 0, 0.12),
    0 16px 16px rgba(0, 0, 0, 0.12); */
}

h1,
p {
  font-family: "PT Serif", serif;
}

h1 {
  font-size: 2rem;
}

p {
  font-size: 0.8rem;
  padding: 30px;
}

.footer {
  height: 5vh;
  display: flex;
  justify-content: center;
}

.copywright {
  padding: 20px;
  font-weight: 400;
  font-size: 0.6rem;
}

@media (max-width: 640px) {
  .nav-bar {
    width: 80vw;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .menu-button {
    display: flex;
  }
  .menu {
    display: flex;
    flex-direction: column;
    /* display: none; */
  }
  .menu>a {
    display: flex;
  }
  .footer {
    position: absolute;
    bottom: 1rem;
    right: 30%;
    display: flex;
  }
  .container {
    display: flex;
    flex-direction: column;
    width: 80vw;
    margin: auto;
  }
  .section1,
  .section2,
  .section3 {
    width: 80vw;
    padding: 0;
    margin: 0.5rem;
  }
}  
 <body>
  <header>
    <div class="nav-bar">
      <div class="logo">
        <a href="index.html">andyprv.dev</a>
      </div>
      <a href="#" class="menu-button">
        <span class="bar"></span>
        <span class="bar"></span>
        <span class="bar"></span>
      </a>
      <div class="menu">
        <a href="https://github.com/andreiprv" target="blank">my.work</a>
        <a href="">contact.me</a>
      </div>
    </div>
  </header>

  <main>
    <div class="container">
      <div class="section1">
        <div class="card-h1">
          <h1 class="title1">Title Text</h1>
        </div>
        <div class="card-p">
          <p class="sub-title1">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga porro suscipit voluptatem! Modi placeat beatae porro, id ut maxime veritatis suscipit maiores assumenda dolores. Illum animi provident quae eos voluptate!
          </p>
        </div>
      </div>

      <div class="section2">
        <div class="card-h1">
          <h1 class="title2">Title Text</h1>
        </div>
        <div class="card-p">
          <p class="sub-title2">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga porro suscipit voluptatem! Modi placeat beatae porro, id ut maxime veritatis suscipit maiores assumenda dolores. Illum animi provident quae eos voluptate!
          </p>
        </div>
      </div>

      <div class="section3">
        <div class="card-h1">
          <h1 class="title3">Title Text</h1>
        </div>
        <div class="card-p">
          <p class="sub-title3">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga porro suscipit voluptatem! Modi placeat beatae porro, id ut maxime veritatis suscipit maiores assumenda dolores. Illum animi provident quae eos voluptate!
          </p>
        </div>
      </div>
    </div>
  </main>
  <div class="footer">
    <div class="footer-last">
      <p class="copywright">Created by Andrei Ionescu 2020</p>
    </div>
  </div>
</body>