jQueryの3.1.1とCSSフレキシボックス

要素が始まる場合、jQueryのフェード機能を使用する場合：フェードアウトされ、次に「表示なし」と、jQueryの注入であろう。：アイテムがフェードインされたときに「表示ブロックを」jQueryの3.1.1とCSSフレキシボックス

フレックスボックスレイアウトでは、要素が次の行に折り返されます。

親のdisplay:flexを無効にすると、期待どおりに動作します。

最初に非表示にする必要がある特定の要素に対してdisplay:flexを無効にする方法はありますか？

私は使用してこれを克服することができます

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

をしかし、この方法は、この場合には望ましいことではありません。助言がありますか？ここで

デモ

$('#clickme').click(function() { 
 
    $('#test').fadeToggle(); 
 
    return false; 
 
});

#flex { 
 
    display: flex; /* BREAKS JQUERY FADE, JQUERY INJECTS DISPLAY:BLOCK; */ 
 
    flex-direction: column; 
 
} 
 
#main { 
 
    flex: 1; 
 
} 
 
.hidden { 
 
    display: none; 
 
}

<script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script> 
 
<body id="flex"> 
 
    <div id="main"> 
 
    <span class="tools"> 
 
     <a class="a" href="" id="clickme">Click Me</a> 
 
     <span id="test" class="hidden">I should be inline!</span> 
 
    </span> 
 
    </div> 
 
</body>

あなたは#flexにdisplay:flexを無効にすると予想される/望まれるようには機能しています。

出典

2016-10-04 Bill Kervaski

ここでデモが –

httpsの役に立つかもしれません：// jsfiddle。ネット/ 60xush0w/ –

私はこれが可能だとは思わないJqueryの* "fade" *を使用しています。 ** display **：flex-item **は適用されるべきもの**がありません。残念ながら、ここに独自の関数を記述する必要があります。 –

あなたは要素を表示する際に、jQueryのはそのdisplayについての推測をしなければならない、ためです.toolsスパン

\t \t \t $(document).ready(function() { 
 

 
\t \t \t $('#clickme').click(function() { 
 
\t \t \t  $('#test').fadeToggle(); 
 
\t \t \t  return false; 
 
\t \t \t }) 
 

 
\t \t \t });

#flex { 
 
    display: flex; 
 
    /* BREAKS JQUERY FADE, JQUERY INJECTS DISPLAY:BLOCK; */ 
 
    //flex-direction: column; 
 

 
} 
 
#main { 
 
    flex: 1; 
 
} 
 
.tools { 
 
    display: flex; 
 
} 
 
.hidden { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body id="flex"> 
 

 
    <div id="main"> 
 

 
    <span class="tools"> 
 
    <a class="a" href="#01" id="clickme">Click Me</a> 
 
    <span id="test" class="hidden">I should be inline!</span> 
 
    </span> 
 

 
    </div>

出典

2016-10-04 15:50:05

例では動作しますが、これはスパン全体をラップするだけで、インラインのままにしておく必要があります。 –

何を意味するのか分かりません。隠されたスパンを*絶滅させたくないという意味ですか？ 'white-space：nowrap'はそれを行います。 –

この場合ではなく、デフォルトではありません。スパンは常にインライン要素でなければなりません。カスタム関数はハックのようなものですが、うまくいきます。何らかの理由で、javascript/jquery経由でCSSを追加するのが嫌です。。私だけかもしれない –

にフレキシボックスを適用する必要があります。これは、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; 
}

基本的には同じタイプの新たな要素を作成し、本体に挿入します。 displayが表示されている要素のデフォルト表示と見なされます。このアプローチはとても不快なので、古いバージョンのjQueryはより良いIMOでした。

とにかく、フレックスコンテナとしてbodyをスタイル付けするのが問題です。フレックスコンテナの子供はブロックされます。したがって、そのダミー要素の計算されたdisplayは"block"になります。これは、要素がフレックスレイアウトに参加していなくても受け取る要素です。

体にはdisplay: flexを避ける方が良い。代わりにラッパーを追加できます。

出典

2016-10-04 16:04:31 Oriol

$('#clickme').click(function() { 
 
    $('#test').fadeToggle(); 
 
    return false; 
 
});

#flex { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
#main { 
 
    flex: 1; 
 
} 
 
.hidden { 
 
    display: none; 
 
}

<script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script> 
 
<div id="flex"> 
 
    <div id="main"> 
 
    <span class="tools"> 
 
     <a class="a" href="" id="clickme">Click Me</a> 
 
     <span id="test" class="hidden">I should be inline!</span> 
 
    </span> 
 
    </div> 
 
</div>

最終的には、このようなものは、どのような作品です：

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

使用法：

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

出典

2016-10-04 17:49:19

jQueryの3.1.1とCSSフレキシボックス

答えて

関連する問題