为啥在移动设备中我的 flex 样式会超出我的导航栏

Posted 2023-03-05

【中文标题】为啥在移动设备中我的 flex 样式会超出我的导航栏

【英文标题】：Why is my flex styling going over my nav bar when in mobile为什么在移动设备中我的 flex 样式会超出我的导航栏

【发布时间】：2019-06-19 18:59:12

【问题描述】：

所以我尝试使用 flex 样式来使我的页面居中，这是许多其他专家在过去的论坛中告诉我的，并且从不使用浮动。在将页面从台式机缩小到平板电脑和移动设备以实现响应式网站时，很多人建议根据情况使用 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);

【问题讨论】：

你应该先删除浮动，因为它没用，然后你需要允许换行

好的，但我希望我的图像在左边，而我的文本在右边，同时它仍然是屏幕的中心，如我的屏幕截图所示。请随时修改我的代码，然后在有机会时将其提交给我。

【参考方案1】：

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

一些解释……

首先，flex 容器至少是视口的高度。有了这些，我们就可以专注于孩子们。我告诉.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" >
      <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/