web-dev-qa-db-ja.com

flexbox構文を使用してdivを互いに積み重ねる方法はありますか？

Flexboxの問題。うまくいけば、誰かが助けることができます:)

私は、divで作られたカードのデッキを構築し、position：absoluteを使用する場合と同じようにそれらを積み重ねようとしています。

flexboxを使用して同じスペースでdivを相互にオーバーレイする方法はありますか？

htmlcsslayoutflexbox
13
Alfonso Estévez-Vilanova

それを取得する1つの方法は、負のマージンを設定することです。それを使用するカードのデッキ：

.deck {
    display: flex;
    height: 200px;
    flex-direction: column;
}

.card {
    height: 100px;
    width: 60px;
    flex: 100px 1 0;
    border: solid 1px black;
    border-radius: 5px;
    margin-bottom: -80px;
    background-color: white;
    box-shadow: 3px 3px 3px gray;
}
<div class="deck">
<div class="card">1</div>    
<div class="card">2</div>    
<div class="card">3</div>    
<div class="card">4</div>    
<div class="card">5</div>    
</div>
17
vals

あなたからのコードとより多くの情報が必要になるでしょうが、それは可能だと思います。

あなたがそれをソリティアの方法でやりたいのなら：

一番上のカードに隠されたオーバーフローを追加し、max-heightを20pxとしましょう。

最後のものにはmax-heightとoverflow:autoがないはずです。

しかし、あなたがしていることは、おそらくフレックスボックスなしで行うほうが簡単です。 Flexboxはposition:abosoluteでも使用できます。これらは異なる属性です。あなたが達成しようとしていることの例をいくつか挙げてください。私がお手伝いできるかもしれません。

1
Maciej Paprocki