Навигационная панель с использованием Flexbox

Question

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

body {
  margin: 0 auto;
}

.container {
  display: flex;
  background-color: lightblue;
  border: 1px solid lightblue;
  border-radius: 10px;
}

.border {
  padding: 0px 10px;
}

.box-1 {
  flex: 0.1;
}

.box-2 {
  flex: 0.1;
}

.box-3 {
  flex: 0.1;
}

.box-4 {
  flex: 3;
  text-align: right;
}

.box-5 {
  flex: 0.1;
}

h4 {
  color: white;
  font-weight: normal;
}

<div class="container">
  <div class="box-1 border">
    <h4>Home</h4>
  </div>
  <div class="box-2 border">
    <h4>About</h4>
  </div>
  <div class="box-3 border">
    <h4>Contact</h4>
  </div>
  <div class="box-4 border">
    <h4>Login</h4>
  </div>
  <div class="box-5 border">
    <h4>Signup</h4>
  </div>
</div>

Answer 1

• сначала добавьте свойство flex-wrap на больших экранах, например:

  .container {display: flex; цвет фона: светло-голубой; граница: 1px solid светло-голубой; радиус границы: 10 пикселей; flex-wrap: обертка; }

• затем добавьте медиа-запрос в определенную точку останова, например, 400 пикселей или 320 пикселей, например:

  @ media screen и (max-width: 400px) { .container {направление гибкости: столбец; }}

Answer 2

Так как вы уже используете flex, это должно помочь:

@media screen and (max-width: 356px) {
  .container {
    flex-direction: column;
    align-items: flex-start;
  }
}