13

次の子が収まるまでコンテナーのサイズが変更されると、子が引き伸ばされるように、flex-wrap: wrapとのフレックス コンテナーがあります。align-items: stretch

問題は通常、最後の行に前の行よりも要素が少なく、子が伸びすぎてしまうことです (すべてのボックスは、すべての状況で同じに見えるはずです)。コンテナの最後にたくさんの空のボックスを作成する以外に、どうすればそれを防ぐことができますか?

body {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-items: stretch;
    align-items: stretch;
}
.child {
    height: 50px;
    margin: 10px;
    -webkit-flex: 1 1 50px;
    flex: 1 1 50px;
    background-color: red;
    border: 1px solid black;
}
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>

JSFiddle はこちら: http://jsfiddle.net/m_gol/B3wLG/2/

4

5 に答える 5

5

私がこれまでに見つけた唯一の解決策は、プログラムでいくつかの空の子要素を追加して完全な行を構成することです.行よりも多くを追加して、それらがオーバースピルすることは問題ありません(空であるため)。

于 2016-01-21T11:05:20.757 に答える
3

最後のアイテムを引き延ばしたくない場合は、コンテナに css を追加することでソリューションをシンプルに保つことができます。

body:after {
    content: "";
    flex: 99999 1 auto;
}

これにより、最後の行のアイテムが完全に伸びるのを防ぎますが、あなたのケースでは、おそらく最後のアイテムを前の行と同じくらい伸ばす必要があります。これを実現するには、コンテナーの最後に同じサイズの多数の偽の要素を追加する必要があります。

この調整された fiddleを参照してください。通常の行に含まれると思われる数の偽の要素が少なくとも必要になります。最後の行を埋める偽の要素がなくなるとすぐに、アイテムはさらに伸び始めます。

コンテナの最後にある偽の要素

于 2019-07-02T08:30:13.223 に答える
-1

最後の数量 N の子要素の幅が最初の要素の幅と一致するかどうかを確認するには、JS を使用する必要があると思います。一致しない各要素について、フレックスを解除し ( flex: none)、最初の要素の幅に一致するように幅を設定します。

そのための小さなスクリプトをまとめました。smoothFlex残念ながら、クラスを機能させるには、クラスを親に追加する必要があります。または、他のセレクターを使用できます。

style を持つすべての要素をすばやく選択する方法がわかりませんdisplay: flex。

それ以外の場合、次のスクリプトは期待どおりに機能します。

var RESIZE_DELAY = 120,
    FLEX_SELECTOR_STRING = '.smoothFlex',
    resizeTimeout = undefined;
$(window).on('resize.smoothFlex',function(){
    clearTimeout(resizeTimeout);
    resizeTimeout = setTimeout(function(){
        $(FLEX_SELECTOR_STRING).each(function(){
            var firstChildW = Math.floor($(this).children().first().width());
            $($(this).children(':gt(0)').get().reverse()).each(function(){
                if($(this).width()==firstChildW) return false;
                else $(this).css({
                    flex : "none",
                    width : firstChildW + "px",
                });
            })
        });
    }, RESIZE_DELAY);
});

IMO、フレックスボックス標準には、これに対するネイティブオプションが必要です-親がラップされている場合はデフォルトである必要があります。

ソース:

于 2014-03-21T19:54:57.527 に答える