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

Question

我是前端開發的新手，目前正在做一個網站項目。
它有一個簡單的布局，我正在使用 CSS Flexbox 來執行它。 例如在 Firefox 中效果很好，在 Safari 中效果很差。 我做了很多研究，發現 Flexbox 在舊版本的 Safari 中不完全支持，但是我有最新版本。 尺寸和定位不能正常工作，水平對齊項目有效。

下面是 Firefox 中其中一頁的所需外觀：圖片

以下是Safari中的同一頁面（在 Chrome 中看起來相同）：

在 Safari 中縮小時，它看起來像這樣：

 .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

幾個問題：

1. 如果您希望在所有屏幕尺寸上兩列的寬度均為 50%，則需要在 p 和 img 標簽上設置flex:1 1 50% 。
2. 如果您希望 img 標簽放大和縮小而不是始終保持完整大小，則需要在其上設置width:100%;height:auto 。
3. 如果你想將兩個元素垂直居中，你只需要align-items:center在它們的容器上（其中定義了 display:flex ）並且不對它們使用任何垂直填充

根據個人喜好，我會在 p 和 img 標簽上設置display:block ，或者更好地將它們包裝在標簽中，以防止 styles 某些瀏覽器可以放在它們上的任何奇怪現象。

代碼：

<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 上測試，最新的一切）

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 中有一些錯字/錯誤。

如果沒有完整的代碼，很難知道哪些內容適用於您的特定布局，哪些內容不適用。

無論如何，我的方法更像是：

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

如果您要進行流暢的布局，也可以划掉中斷標簽，在某些情況下，您可能只有一行中的“打鼓”一詞。