问题

在Safari中，弯曲盒子在垂直方向上不会正确地将项目对齐到flex-start（左侧），但在Chrome和其他浏览器中正常工作。在我们的应用程序中使用MUI Data Grid时会出现问题，但在简单的HTML中重新创建示例时会出现相同的结果。也许在我的环境中有一些奇怪的东西？

<center>
  <div style={{ width: "200px", display: "flex", flexDirection: "column", alignItems: "flex-start", justifyContent: "center", backgroundColor: "yellow" }}>
    <div style={{ width: "20px", height: "20px", backgroundColor: "pink" }}></div>
    <div style={{ width: "100px", height: "20px", backgroundColor: "red" }}></div>
    <div style={{ width: "10px", height: "20px", backgroundColor: "green" }}></div>
  </div>
</center>

在Safari中显示为：

在Chrome中正确呈现的代码如下：

• 帮助！

<details>
<summary>英文:</summary>

I must be doing something wrong as this seems pretty basic, but flex box in the column direction does not correctly align items at the flex-start (left) in Safari for me.  It works fine on Chrome and other browsers.  The issues comes up in our application when using MUI Data Grid but the same results appear when I recreate the example in simple HTML.  Perhaps there&#39;s something odd in my environment?

            &lt;center&gt;
              &lt;div style = {{width:&quot;200px&quot;, display:&quot;flex&quot;, flexDirection:&quot;column&quot;, alignItems:&quot;flex-start&quot;, justifyContent:&quot;center&quot;, backgroundColor:&quot;yellow&quot;}} &gt;
                &lt;div style={{width:&quot;20px&quot;, height:&quot;20px&quot;, backgroundColor:&quot;pink&quot;}} &gt; &lt;/div&gt;
                &lt;div style={{width:&quot;100px&quot;, height:&quot;20px&quot;, backgroundColor:&quot;red&quot;}} &gt; &lt;/div&gt;
                &lt;div style={{width:&quot;10px&quot;, height:&quot;20px&quot;, backgroundColor:&quot;green&quot;}} &gt; &lt;/div&gt;
            &lt;/div&gt;
           &lt;/center&gt;

Displays in Safari as:
[![enter image description here][1]][1]

The code renders correctly in Chrome, here:

[![enter image description here][2]][2]

-Help!


  [1]: https://i.stack.imgur.com/rRLDK.png
  [2]: https://i.stack.imgur.com/COKMR.png

</details>


# 答案1
**得分**: 1

我能够确定问题所在。我之前使用了HTML的&lt;center&gt;标签来将flex列居中显示在页面上。我将编辑我的问题以显示这些标签。这在Chrome中运行得很完美，但&lt;center&gt;标签在Safari中引起了问题。我移除了&lt;center&gt;标签，用设置为自动水平边距的<div>标签替代，这样可以将内容居中，这解决了Safari中的问题。我之前没有意识到&lt;center&gt;标签已被弃用，这可能是导致Safari无法正确处理列flex box的原因。

<details>
<summary>英文:</summary>

I was able to identify the issue.  I had wrapped the above coding using the HTML &lt;center&gt; tag in order to center the flex column on the page.  I&#39;ll edit my question to show the tags.  This worked perfectly in Chrome but the &lt;center&gt; tag caused the problem with Safari.  I removed the center tags and replaced with divs with horizontal margins set to auto, which centers content and this resolved the issue in Safari.  I had not realized that the Center tag was deprecated, which is probably why it causes Safari to not handle the column flex box correctly.

</details>