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

Question

我是前端开发的新手，目前正在做一个网站项目。
它有一个简单的布局，我正在使用 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>

Answer 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（在 Safari 上测试，Chrome 在 mac 上测试，所有内容都是最新的）

Answer 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>

Answer 3

我在现代浏览器上使用 flexbox 从来没有遇到过问题。我假设你的 css.

中有一些 typo/error

没有完整的代码，很难知道什么适合您的特定布局，什么不适合。

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

    .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。

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

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

Why is my Flexbox layout not working properly in Safari 15 and in Chrome?

html

css

flexbox