display: webkit-flex 将 inline-block div 推送到 Safari 中的下一行答案

【问题标题】：display: webkit-flex Pushes inline-block div to next line in Safaridisplay: webkit-flex 将 inline-block div 推送到 Safari 中的下一行
【发布时间】：2015-05-02 05:39:59
【问题描述】：

我正在尝试学习 HTML/CSS 并在添加时发现显示：-webkit-flex；对于 CSS，导航中的最后一个 div 被推到下一行。当我通过简单地删除该行来禁用弹性框时，div 会跳回到（内联块）导航。我目前正在 safari 中进行测试

该页面在 Firefox 中看起来应该是这样，但在 Safari 中却不是，有什么建议吗？

代码如下：

<body>
    <header> 
        <div class="logo"> 
            <h1>Guitar site</h1>
        </div>
        <nav>
            <div class="leftMenu">
                <a href="index.html" class="menuButton">Home</a>
            </div>
            <div class="centerMenu">
                <div>
                    <a href="beginner.html" class="link">Beginner</a>
                </div>
                <div>
                    <a href="advanced.html" class="link">Advanced</a>
                </div>
                <div>
                    <a href="tips.html" class="link">Tips</a>
                </div>
            </div>
            <div class="rightMenu">
                <a href="contact.html">Contact</a>
            </div>
        </nav>  
    </header>
    <h1> test</h1>
</body>

这是我写的所有 CSS，还有一个我没有包含的 CSS 重置部分。

.leftMenu,
.rightMenu,
.centerMenu {
    text-align: center;
    display: inline-block;
    border-bottom: solid .1em;
    display: -webkit-flex;
}

.leftMenu,
.rightMenu {
    background-color: #454ed6;
    height: 2em;
    padding-top: 1em;
    width: 17.5%;
    -webkit-justify-content: space-around;
}

.leftMenu {
    float: left;
}


.rightMenu {
    float: right;
}

.centerMenu a {
    display: block;
    height: 2em;
}

.centerMenu  {
    width: 65%;
    height: 6em;
    background-color: #86acbe;
    -webkit-flex-direction: column;
    -webkit-justify-content: space-around;
}

【问题讨论】：

您必须对父元素使用display:-webkit-flex。还要使用标准格式display:flex。如果针对较旧的 safari 版本，请使用 display: -webkit-box; 检查演示 jsbin.com/silolomiqe/1/edit 在 chrome 和 firefox 中完美运行。

标签： css safari flexbox

【解决方案1】：

flex 布局背后的主要思想是让容器能够改变其项目的宽度/高度（和顺序）以最好地填充可用空间。

所以你的主要容器是nav元素；并且您必须为 nav 元素定义 display:flex 属性。而且您的导航 HTML 结构格式不正确。

检查Demo，这是您修改后的 CSS 代码。

nav{display: -webkit-flex;
  display: -webkit-box; /*for older safari version*/
  display: flex;}

.leftMenu,
.rightMenu,
.centerMenu {
    text-align: center;
     border-bottom: solid .1em;
  justify-content: space-around;
    /*display: inline-block;
    display: -webkit-flex;*/
}

.leftMenu,
.rightMenu {
    background-color: #fbfbfb;
    height: 2em;
    padding-top: 1em;
    width: 17.5%;
    /*-webkit-justify-content: space-around;*/
}

/*.leftMenu {
    float: left;
}


.rightMenu {
    float: right;
}*/

.centerMenu a {
    display: block;
    height: 2em;
}

.centerMenu  {
    width: 65%;
    height: 6em;
    background-color: #86acbe;
   /* -webkit-flex-direction: column;
    -webkit-justify-content: space-around;*/
}

<header> 
    <div class="logo"> 
        <h1>Guitar site</h1>
    </div>
    <nav>
        <div class="rightMenu">
            <a href="index.html" class="menuButton">Home</a>
        </div>
        
            <div class="rightMenu">
                <a href="beginner.html" class="link">Beginner</a>
            </div>
            <div class="rightMenu">
                <a href="advanced.html" class="link">Advanced</a>
            </div>
            <div class="rightMenu">
                <a href="tips.html" class="link">Tips</a>
            </div>
       
        <div class="rightMenu">
            <a href="contact.html">Contact</a>
        </div>
    </nav>  
</header>
<h1> test</h1>

【讨论】：