Question

因此，我尝试使用flex样式将页面居中，这是很多其他专家在过去的论坛中告诉我的，并且从未使用过浮动。许多人建议在将响应性网站的页面从台式机减少到平板电脑和移动设备时，根据情况使用网格或flex。

这就是我正在尝试做的事，而我在台式机上得到了我想要的。

现在，文本在移动设备上的导航栏上方移动了。我希望图像堆叠在顶部，文本堆叠在底部。我该如何解决？还有一件事情。当我点击我的汉堡图标时，它会阻止文本，并且我想知道当我扩展菜单时如何将其显示在导航菜单下方。我知道您可以使用媒体查询来确定何时达到一定数量的像素，但是我不确定要使用什么代码。我知道例如我喜欢的一个是

display: block;

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

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

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

在这种情况下，您需要简化操作。我个人认为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" 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/

在移动设备中，为什么我的Flex样式会超过导航栏

1 个答案: