为什么我的 Flexbox 布局在 Safari 15 和 Chrome 中无法正常工作？答案

【问题标题】：Why is my Flexbox layout not working properly in Safari 15 and in Chrome?为什么我的 Flexbox 布局在 Safari 15 和 Chrome 中无法正常工作？
【发布时间】：2022-01-12 11:56:58
【问题描述】：

我是前端开发的新手，目前正在做一个网站项目。
它有一个简单的布局，我正在使用 CSS Flexbox 来执行它。例如在 Firefox 中运行良好，在 Safari 中运行很差。我做了很多研究，发现旧版本的 Safari 并不完全支持 Flexbox，但是我有最新版本。大小和定位不能正常工作，水平对齐项目有效。

以下是其中一个页面在 Firefox 中所需的外观： image

以下是 Safari 中的同一页面（在 Chrome 中看起来相同）： image

在 Safari 中缩小时，它看起来像这样： image

.container4 {
  font-family: "Chakra Petch", sans-serif;
  font-size: 40px;
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 50px;

.element4 {
  padding-left: 50px;
  padding-top: 50px;
  align-self: flex-start;
  flex: 1 1 50px;
}

.element4-2 {
  padding-right: 50px;
  padding-top: 50px;
  align-self: flex-start;
  flex: 1 1 50px;
}

<div class="container4">
  <p class="element4">
    Drummer and beat producer from Gothenburg, based in Oslo. The beats are
    built around Pers drumming, <br />
    using samples from a wide variety of genres <br />
    mixed with other sounds.
  </p>

  <img class="element4-2" src="../Images/galgeberg.png" alt="wall2" />
</div>

【问题讨论】：

请添加您的 html 和 css 的最小可复制示例。顺便说一句，您在 css 中错过了一个右括号！
我认为您的问题是由图像大小引起的。尝试将图像大小设置为固定值，看看是否仍然出现。
问题是因为你设置了 align-item 为拉伸，尝试使用 justify-content : space-between。

标签： html css flexbox

【解决方案1】：

几个问题：

如果您希望两列在所有屏幕尺寸上的宽度均为 50%，则需要在 p 和 img 标签上设置 flex:1 1 50%。
如果您希望 img 标签可以放大或缩小，而不是始终保持原样，则需要在其上设置width:100%;height:auto。
如果您想将两个元素垂直居中，您只需要在它们的容器上使用align-items:center（其中定义了 display:flex），并且不要在它们上使用任何垂直填充

根据个人喜好，我会在 p 和 img 标签上设置display:block，或者最好将它们包装在标签中，以防止某些浏览器可能在它们上放置的样式出现任何奇怪现象。

代码：

<div class="container4">
  <p class="element4">Drummer and beat producer from Gothenburg, based in Oslo. The beats are built around Pers drumming,<br />using samples from a wide variety of genres <br />mixed with other sounds.</p>
  <img class="element4-2" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" alt="wall2" />
</div>

<style>
.container4 {
  font-size: 40px;
  display: flex;
  align-items: center;
  gap: 50px;
}
.element4 {
  padding-left: 50px;
  flex: 1 1 50%;
}

.element4-2 {
  padding-right: 50px;
  flex: 1 1 50%;
  width:100%;height:auto;
}
</style>

Codepen：https://codepen.io/nonsintetic/pen/poWygaY（在 Mac 上的 Safari 和 Chrome 上进行了测试，所有内容都最新）

【讨论】：

谢谢，这很有帮助。当我给 img 标签宽度：100 时，由于某种原因它变得太大了，但是当我给它 50 % 时看起来更准确。

【解决方案2】：

几件事，对齐项目拉伸导致问题。您还需要确保为每个元素潜水 50% 的间隙，第三，您已设置图像的最大宽度以保持大小。这是具有响应能力的jsfiddle。

.container4 {
  font-family: "Chakra Petch", sans-serif;
  font-size: clamp(30px,20vw+1px,40px);
  display: flex;
  justify-content: space-between;
  padding:2em;
  }
  .element4{
  max-width:50%;
  margin:auto;
}
.element4-2{
  max-width:50%;
  margin:auto;
}
.container4 img{
  width:100%;
}

<div class="container4">
  <p class="element4">
    Drummer and beat producer from Gothenburg, based in Oslo. The beats are
    built around Pers drumming, <br />
    using samples from a wide variety of genres <br />
    mixed with other sounds.
  </p>

  <img class="element4-2" src="https://www.ejin.ru/wp-content/uploads/2017/09/2-2400-696x392.jpg" alt="wall2" />
</div>

【讨论】：

【解决方案3】：

我在现代浏览器上使用 flexbox 从来没有遇到过问题。我假设您的 css 中有一些错字/错误。

如果没有完整的代码，很难知道哪些内容适用于您的特定布局，哪些内容不适用。

无论如何，我的方法更像是：

    .container {
       font-family: "Chakra Petch", sans-serif;
       font-size: 40px;
       display: flex;
       flex-direction: row; // makes sure it's treated as row
       width: 100vw; // 100 viewport width = fills entire viewport width
       height: 100%; // take 100% of available space (since you have a header)
       justify-content: center;
       align-items: center;
    }

    .page-paragraph {
      margin: 0;
      padding: 50px; // padding of 50px all around
    }
   
    .page-img {
      width: 50%; // image is always 50% of available width
      margin: 50px;
    }

您有什么理由专门使用课程吗？如果一个元素只出现一次，最好给它一个 id。您可以使用“#”选择器指定 ID。

如果你想要一个流畅的布局，也可以划掉中断标签，在某些情况下，您可能只在一行中有“打鼓”这个词。

【讨论】：