html - 为什么在移动设备中我的 flex 样式会越过导航栏

Question

所以我尝试使用 flex 样式来居中我的页面，这是许多其他专家在过去的论坛中告诉我的，并且从不使用 float 。很多人建议在将页面从桌面缩小到平板电脑和移动设备以构建响应式网站时，根据情况使用 grid 或 flex。

这是我尝试做的事情，我在桌面上得到了我喜欢的东西。

现在文本在移动设备中越过了导航栏。我希望图像堆叠在顶部，文字堆叠在底部。我该如何解决？还有一件事。当我点击我的汉堡包图标时，它会挡住文本，我想知道当我展开我的菜单时如何将它放在导航菜单下方。我知道您可以在达到一定数量的像素时使用媒体查询，但我不确定具体使用什么代码。我知道有一个是我喜欢的，例如

display: block;

当它在网格而不是 flex 中时效果很好。

看看我的代码，告诉我我该怎么做才能解决这个问题？这是我从使用 flex 得到的想法。 https://css-tricks.com/centering-css-complete-guide/

1. 点击水平和垂直

2. 然后点击Can you use 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

在这种情况下，您需要简化事情。我个人认为 Grid 对你来说太过分了。 Flexbox 足以满足您的布局需求。我为您整理了一个精简的演示，仅包括必要的 HTML和 CSS ，这样您就可以看到布局是如何工作的。

一些解释......

首先，flex 容器的高度至少要达到视口(viewport)的高度。有了这些，我们就可以专注于 children 了。我告诉.content使用 flex-grow: 1 占用最多的可用空间. nav隐式占用剩余空间，这就是我们想要的。所有标记都是文档流的一部分，并占用“真实”空间。看起来有些东西可能已经在您的示例中进行了绝对定位，从而导致移动设备出现溢出问题。

就内容区域中的图像垂直居中而言，我将其设置为 margin: auto , 使其居中而不增加 CSS 的复杂性.

我添加了一个 link to the Fiddle在这里，在我的回答结束时。

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/