ギャラリーアイテムなどのアイテムを表示するときの位置付けの問題

ギャラリーアイテムのように表示する必要のあるデータ（ボックス）があります（各ショップサイトのように表示されます）。 4つのアイテム（ボックス）は、最初からボックスの1つが高さ300pxを持ち、他のすべてが高さが250pxで、次に最初の行の最大高さの最後から次のアイテムがあるとします。これらの空のスペースには、次の行のすべてのボックスは、ここで最初の行からのボックスギャラリーアイテムなどのアイテムを表示するときの位置付けの問題

の下に表示されなければならない私のコードは

ある

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.flex-container { 
    width: 400px; 
    background-color: lightgrey; 
} 

.flex-item { 
    background-color: cornflowerblue; 
    width: 122px; 
    margin: 0 10px 10px 0; 
    float: left; 
    padding: 15px; 
} 
</style> 
</head> 
<body> 

<div class="flex-container"> 
    <div class="flex-item">flex item 1</div> 
    <div class="flex-item">flex item 2flex item 2flex item 2flex item 2</div> 
    <div class="flex-item">flex item 3</div> 
    <div class="flex-item">flex item 1</div> 
    <div class="flex-item">flex item 2</div> 
    <div class="flex-item">flex item 3</div> 
</div> 

</body> 
</html>

出典

2017-04-12 Muhammad Arslan

私は石積みとして知っている効果を達成しようとしています。自分自身をするのはかなり複雑ですが、良いプラグインがあります。これをチェックしてください：http://masonry.desandro.com/ – kapser

このリンクは私の側では機能していません:( –

このプラグインなしでどうやったらいいのですか？ –

あなたが探している効果は、私の知る限り、石積み、またはPinterestの効果と呼ばれます。 This is a good plugin for it.

はここで実装さ石工とあなたのコードです：石工を初期化するために使用さhttps://jsfiddle.net/jwjkt933/

のjQueryコード：あなたは純粋なJSと石工をも初期化することができますが

(function($) { 
    $('.flex-container').masonry({ 
    columnWidth: 152, 
    gutter: 10, 
    itemSelector: '.flex-item' 
    }); 
})(jQuery);

また、この例では、jQueryのを必要とします。

出典

2017-04-12 20:09:59 kapser

たいあなたは最小の高さを設定する必要があります高さフレックス項目の具体的な方法、内容にもかかわらず、その方法は、あなたは常にここのショーとして、フレックスコンテナ全体で同じサイズのボックスを取得します：

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
.flex-container { 
 
    width: 400px; 
 
    background-color: lightgrey; 
 
} 
 

 
.flex-item { 
 
    background-color: cornflowerblue; 
 
    width: 122px; 
 
    margin: 0 10px 10px 0; 
 
    float: left; 
 
    padding: 15px; 
 
    height:100%; 
 
    min-height: 75px; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<div class="flex-container"> 
 
    <div class="flex-item">flex item 1</div> 
 
    <div class="flex-item">flex item 2flex item 2flex item 2flex item 2</div> 
 
    <div class="flex-item">flex item 3</div> 
 
    <div class="flex-item">flex item 1</div> 
 
    <div class="flex-item">flex item 2</div> 
 
    <div class="flex-item">flex item 3</div> 
 
</div> 
 

 
</body> 
 
</html>

メイク上記の例で使用されている最小高さと高さのパラメータに注意してください。

出典

2017-04-12 20:06:49 Midimistro

フレックスでは行ではなく行で実行できます。 flex-direction: column;とalign-contentプロパティを使用する必要があります。このフィドルをチェックしてください。

https://jsfiddle.net/4evoq3nt/1/

出典

2017-04-12 20:08:10 Varin

こんにちは、@Varinの問題は高さですコンテンツは動的で、高さについてはわからないので、高さを使用しないでください –

このソリューションは水平方向に成長します。アイテムを追加したままにすると、垂直レイアウトの代わりに水平スクロールバーが表示されます。***は、このレイアウトから平均的なユーザーが期待するものではありません。したがって、あなたのソリューションは質問に答えません。列に表示されるアイテムの未知のストリームを持つときに個人的にこれを使用することは疑いの余地があります。 'Flexbox'は' masonry'/'pinterest'レイアウトには使用できません。 CSSの列を考えてみましょう。しかし、サイズ変更や項目の追加に大きなコンテンツリフローの問題があります。 –

ギャラリーアイテムなどのアイテムを表示するときの位置付けの問題

答えて

関連する問題