JQuery 3.1.1和CSS flexbox

使用JQuery的淡入功能时，如果元素以“display:none”开头，然后淡入，JQuery将在淡入项时注入“display:block”

在flexbox布局中，这将导致图元换行到下一行

当我在父对象上禁用

display:flex

时，它的行为与预期的一样

有没有办法禁用最初需要隐藏的特定元素上的

display:flex

我可以通过以下方法克服此问题：

$('el').fadeIn().css('display','inline-block');

但这种方法在这种情况下并不可取。有什么建议吗

这是一个演示

$（'clickme'）。单击（函数（）{
$（“#测试”）.fadeToggle（）；
返回false；
});
#flex{
display:flex；/*中断JQUERY淡入淡出，JQUERY注入display:BLOCK*/
弯曲方向：立柱；
}
#主要{
弹性：1；
}
.隐藏{
显示：无；
}

我应该在线！
您需要将flexbox应用于
.tools
span


$（文档）.ready（函数（）{
$（'#clickme'）。单击（函数（）{
$（“#测试”）.fadeToggle（）；
返回false；
})
});
#flex{
显示器：flex；
/*打破JQUERY淡入淡出，JQUERY注入显示：块*/
//弯曲方向：立柱；
}
#主要{
弹性：1；
}
.工具{
显示器：flex；
}
.隐藏{
显示：无；
}

我应该在线！
这是因为，当您显示一个元素时，jQuery必须猜测它的
显示。这是因为CSS设计得很糟糕
dislay:none
不应该存在

jQuery在其
getDefaultDisplay
函数中执行此操作：

function getDefaultDisplay( elem ) {
    var temp,
        doc = elem.ownerDocument,
        nodeName = elem.nodeName,
        display = defaultDisplayMap[ nodeName ];

    if ( display ) {
        return display;
    }

    temp = doc.body.appendChild( doc.createElement( nodeName ) );
    display = jQuery.css( temp, "display" );

    temp.parentNode.removeChild( temp );

    if ( display === "none" ) {
        display = "block";
    }
    defaultDisplayMap[ nodeName ] = display;

    return display;
}

基本上，它会创建一个相同类型的新元素并将其插入到主体中。它的计算显示被认为是正在显示的元素的默认显示。这种方法非常容易受骗，较旧版本的jQuery更好

不管怎么说，问题在于您将
body
设计为一个灵活的容器。flex容器的子容器被阻塞。因此，该虚拟元素的计算的
显示将是
“block”
，这就是您的元素将接收的内容，即使您的元素没有参与flex布局

因此，最好避免在车身上显示：flex
。您可以改为添加包装器


$（'clickme'）。单击（函数（）{
$（“#测试”）.fadeToggle（）；
返回false；
});
#flex{
显示器：flex；
弯曲方向：立柱；
}
#主要{
弹性：1；
}
.隐藏{
显示：无；
}

我应该在线！
归根结底，像这样的东西是有效的：

$.fn.inline = function() {
    this.css({'display':'inline'});
};

用法：

$('el').fadeToggle().inline();

这里的一个演示可能有用，我不认为使用Jquery的“淡入淡出”就可以实现这一点。没有应该应用的“显示：弹性项”。不幸的是，您可能必须在这里编写自己的函数。@Paulie\u D但是他的
元素和
id
测试不是一个灵活的项目，我仍然想知道为什么它会添加
display:block而不是内联。将flex应用到他的工具span将使
#test
成为一个flex项，这就是为什么您的解决方案可以工作的原因。我不建议使用
display:flex
标签中的code>。这可能是您可能会遇到的许多问题之一，并且没有必要使用flexbox进行二维布局。对于示例来说是可行的，但这只是包装了整个跨度，它应该保持内联…我不确定您的意思，您的意思是不希望隐藏的跨度永远断裂<代码>空白：nowrap
将执行此操作。在本例中不是，默认情况下也不是。。跨度应始终是内联元素。。自定义函数可以工作，有点粗糙，但它可以工作并且足够简单。。出于某种原因，我讨厌通过javascript/jquery添加CSS。。可能只是我说的，我想你得自己写函数了。