Плохо работает флекс wrap

Question

Столкнулся с проблемой , когда добавил flex-wrap: wrap. Теперь из-за этого , мои элементы не уходят друг под друга когда я уменьшаю размер страницы , а просто стоят в непонятном положение , как сделать так , чтобы они уходили друг под друга ? На данной картинке , я не менял размер страницы , каждый элемент должен стоять в одной строке , друг за другом.

вот картинка

@import "nulstyle.scss";
@font-face {
   font-family: 'Gilroy';
   src: url("/fonts/Gilroy-Bold.woff");
   font-style: normal;
   font-weight: 700;
   font-display: swap;
}

@font-face {
   font-family: 'Gilroy';
   src: url("/fonts/Gilroy-Regular.woff");
   font-style: normal;
   font-weight: 400;
   font-display: swap;
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Montserrat:wght@400;500&family=Open+Sans:wght@400;600&family=Rubik:wght@400;500&display=swap');
html{
   scroll-behavior: smooth;
}
body {
   background: linear-gradient(222.26deg, #3B1D60 1.22%, #040D3E 106.28%);
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.wrapper {
   min-height: 100%;
   overflow: hidden;
}
._container {
   max-width: 1100px;
   padding: 0 15px;
   margin: 0px auto;
   box-sizing: content-box;
}

/**
* ! ------------Хедер ----------------*/
.header {
   position: absolute;
   width: 100%;
   left: 0;
   top: 0;
   z-index: 50;
}

.header__container {
   display: flex;
   min-height: 36px;
   align-items: center;
}
.header__menu {
   margin: 0px 429px 0px 0px;
}

.menu {}

.menu__list {
   display: flex;
   flex-wrap: wrap;
   list-style: none;
}

.menu__item {

}
.menu__item:not(:last-child) {
   margin: 0px 30px 0px 0px;
}

.menu__link {
   font-family: 'Gilroy';
   font-weight: 600;
   font-size: 12px;
   line-height: 172%;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: #B5B5B5;
}

.butons {
   display: flex;
   text-transform: uppercase;
}

.butons__item {
   width: 112px;
   height: 36px;
   border-radius: 3px;
   font-family: 'Rubik';
   font-style: normal;
   font-weight: 500;
   font-size: 12px;
   line-height: 20px;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: #F2994A;
   border: 1px solid #F2994A;
   display: flex;
   justify-content: center;
   align-items: center;
   &:hover {
      background: #F2994A;
      color: #FFFFFF;
   }
}

<!DOCTYPE html>
<html lang="ru">
    <head>
        <title>Site</title>
        <link rel="stylesheet" href="css/mainstyle.css"/>
        <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
    </head>
    <body>
        <div class="wrapper">
            <header class="header">
                <div class="header__container _container">
                    <nav class="header__menu menu">
                        <ul class="menu__list">
                            <li class="menu__item"></li>
                            <li class="menu__item">
                                <a href="#" class="menu__link">About</a>
                            </li>
                            <li class="menu__item">
                                <a href="#" class="menu__link">Gallery</a>
                            </li>
                            <li class="menu__item">
                                <a href="#" class="menu__link">Pricin</a>
                            </li>
                            <li class="menu__item">
                                <a href="#" class="menu__link">FAQ</a>
                            </li>
                            <li class="menu__item">
                                <a href="#" class="menu__link">Benefits</a>
                            </li>
                        </ul>
                    </nav>
                    <div class="header__menu butons">
                        <a href="#" class="butons__item">SIgn In</a>
                        <a href="#" class="butons__item">Sign Up</a>
                    </div>
                </div>
            </header>
        </div>
        <script src="js/scrip.js"></script>
    </body>
</html>

Answer 1

Так нужно? при размере 500px меню вниз становится

@import "nulstyle.scss";
@font-face {
   font-family: 'Gilroy';
   src: url("/fonts/Gilroy-Bold.woff");
   font-style: normal;
   font-weight: 700;
   font-display: swap;
}

@font-face {
   font-family: 'Gilroy';
   src: url("/fonts/Gilroy-Regular.woff");
   font-style: normal;
   font-weight: 400;
   font-display: swap;
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Montserrat:wght@400;500&family=Open+Sans:wght@400;600&family=Rubik:wght@400;500&display=swap');
html{
   scroll-behavior: smooth;
}
body {
   background: linear-gradient(222.26deg, #3B1D60 1.22%, #040D3E 106.28%);
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.wrapper {
   min-height: 100%;
   overflow: hidden;
}
._container {
   max-width: 1100px;
   padding: 0 15px;
   margin: 0px auto;
   box-sizing: content-box;
}

/**
* ! ------------Хедер ----------------*/
.header {
   position: absolute;
   width: 100%;
   left: 0;
   top: 0;
   z-index: 50;
}

.header__container {
   display: flex;
   min-height: 36px;
   align-items: center;
}
.header__menu {
   margin: 0px 429px 0px 0px;
}

.menu {}

.menu__list {
   display: flex;
   list-style: none;
}

.menu__item {

}
.menu__item:not(:last-child) {
   margin: 0px 30px 0px 0px;
}

.menu__link {
   font-family: 'Gilroy';
   font-weight: 600;
   font-size: 12px;
   line-height: 172%;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: #B5B5B5;
}

.butons {
   display: flex;
   text-transform: uppercase;
}

.butons__item {
   width: 112px;
   height: 36px;
   border-radius: 3px;
   font-family: 'Rubik';
   font-style: normal;
   font-weight: 500;
   font-size: 12px;
   line-height: 20px;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: #F2994A;
   border: 1px solid #F2994A;
   display: flex;
   justify-content: center;
   align-items: center;
   &:hover {
      background: #F2994A;
      color: #FFFFFF;
   }
}
@media (max-width: 500px) {
  .menu__list {
     flex-wrap: wrap;
  }
}

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <title>Site</title>
        <link rel="stylesheet" href="css/mainstyle.css"/>
        <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
    </head>
    <body>
        <div class="wrapper">
            <header class="header">
                <div class="header__container _container">
                    <nav class="header__menu menu">
                        <ul class="menu__list">
                            <li class="menu__item"></li>
                            <li class="menu__item">
                                <a href="#" class="menu__link">About</a>
                            </li>
                            <li class="menu__item">
                                <a href="#" class="menu__link">Gallery</a>
                            </li>
                            <li class="menu__item">
                                <a href="#" class="menu__link">Pricin</a>
                            </li>
                            <li class="menu__item">
                                <a href="#" class="menu__link">FAQ</a>
                            </li>
                            <li class="menu__item">
                                <a href="#" class="menu__link">Benefits</a>
                            </li>
                        </ul>
                    </nav>
                    <div class="header__menu butons">
                        <a href="#" class="butons__item">SIgn In</a>
                        <a href="#" class="butons__item">Sign Up</a>
                    </div>
                </div>
            </header>
        </div>
        <script src="js/scrip.js"></script>
    </body>
</html>

БЛОГ НА HUSL

Плохо работает флекс wrap

Ответы (1 шт):