Почему мой гибкий дизайн проходит через панель навигации в мобильном телефоне

Question

Итак, я попытался использовать гибкий стиль для центрирования моей страницы, о чем многие другие эксперты говорили мне на прошлых форумах и никогда не использовал плавающие объекты. Многие люди предлагают использовать grid или flex в зависимости от ситуации при сокращении страницы с рабочего стола на планшет и мобильный телефон для адаптивного веб-сайта.

Вот то, что я пытался сделать, и я получил то, что мне нравится на рабочем столе.

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

display: block;

, который хорошо работает, когда он находится в сетке вместо flex.

Посмотрите на мой код и скажите, что я могу сделать, чтобы решить эту проблему? Вот откуда у меня появилась идея использовать flex. https://css -tricks.com / центрирования-CSS-полный-гид /

1. Нажмите По горизонтали и вертикали

2. Затем нажмите Можете ли вы использовать flexbox

HTML

<div class="flex-Summary">

  <div style="float: left;">
    <img src="img/wallpaper1.jpg" style="width: 170px; height: 170px; border-radius:50%;">
  </div>

  <div style="float: right;">
    <h2>Summary</h2>
    <p style=" font-size: 20px;">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </P>
  </div>

</div>

CSS

.flex-Summary {
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.8);
}

Answer 1

В подобных случаях вам нужно упростить вещи. Я лично думаю, что Грид для тебя излишне. Flexbox достаточно для вашего макета. Я собрал для вас урезанную демоверсию, включающую только необходимые HTML и CSS, чтобы вы могли увидеть, как работает макет.

Некоторое объяснение ...

Во-первых, гибкий контейнер сделан так, чтобы он был как минимум высотой области просмотра. Имея это в виду, мы можем сосредоточиться на детях. Я говорю .content ребенку, чтобы он занимал наибольшее пространство, доступное с помощью flex-grow: 1. nav неявно занимает оставшееся пространство, что мы и хотим. Вся разметка является частью потока документов и занимает «реальное» пространство. Казалось, что-то, возможно, было абсолютно позиционировано в вашем примере, вызывая проблемы переполнения в мобильном телефоне.

Что касается вертикального центрирования изображения в области содержимого, я установил его на margin: auto, что позволяет центрировать его, не добавляя сложности к CSS.

Я включил ссылку на скрипку здесь и в конце моего ответа.

body, html, p {
  margin: 0;
}

body,
.container {
  min-height: 100vh;
}

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

nav {
  padding: 1em;
  background-color: #002eae;
}

nav a {
  color: white;
}

.content {
  background-color: white;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content-summary {
  width: 500px;
  max-width: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 1em 1.5em;
  display: flex;
}

.content-summary img {
  flex-shrink: 0;
  width: 100px;
  height: 150px;
  padding-right: 10px;
  margin: auto;
}

<div class="container">

  <nav>
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
    <a href="#">Link 4</a>
    <a href="#">Link 5</a>
  </nav>

  <div class="content">
    <div class="content-summary">
      <img src="https://placekitten.com/200/300" alt="">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </div>
  </div>

</div>

http://jsfiddle.net/wzgs5mc2/2/