使柔性物品重疊

我想展示未知數量的撲克牌的橫向系列。要做到這一點，如果太多，他們將不得不重疊。我無法說服Flex盒重疊卡片而不縮小它們。下面的例子縮小了卡片。我試過flex-shrink: 0，但max-width沒有被尊重。使柔性物品重疊

.cards { 
 
    display: flex; 
 
    max-width: 300px; 
 
} 
 

 
.card { 
 
    width: 50px; 
 
    height: 90px; 
 
    border: 1px solid black; 
 
    border-radius: 3px; 
 
    background-color: rgba(255, 0, 0, 0.4); 
 
}

<div class='cards'> 
 
    <div class='card'></div> 
 
    <div class='card'></div> 
 
    <div class='card'></div> 
 
    <div class='card'></div> 
 
    <div class='card'></div> 
 
    <div class='card'></div> 
 
    <div class='card'></div> 
 
    <div class='card'></div> 
 
    <div class='card'></div> 
 
</div>

來源

2017-05-11 Michael Arrison

爲什麼，如果你希望它們重疊使用柔性，不是彎曲，使其充滿了空間意義呢？ – Pete

你可以只使用負邊界的重疊？ – StefanBob

對於給定數量的卡片，負邊距將起作用。但它必須改變每張卡片和每張卡片的總數。我正在尋找更靈活的東西。 –

您可以使用transform: translateX(-10px)使柔性佈局重疊中的元素，但這不會解決您試圖獲得的佈局。我不認爲你可以在Flexbox中做到這一點。但是你可以用JS輕鬆做到這一點。

var parentEl = document.getElementById("cards"); 
 

 
function sortCards() { 
 
    var cards = document.getElementsByClassName("card"), 
 
     cw = parentEl.clientWidth, 
 
     sw = parentEl.scrollWidth, 
 
     diff = sw - cw, 
 
     offset = diff/(cards.length - 1); 
 

 
    for (var i = 0; i < cards.length; i++) { 
 
    i != 0 && (cards[i].style.transform = "translateX(-" + offset * i + "px)"); 
 
    } 
 
} 
 

 
sortCards(); 
 

 
var b = document.getElementById("button"); 
 
b.addEventListener("click", function() { 
 
    var div = document.createElement("div"); 
 
    div.classList.add("card"); 
 
    parentEl.appendChild(div); 
 
    sortCards(); 
 
});

.cards { 
 
    display: flex; 
 
    max-width: 300px; 
 
} 
 

 
.card { 
 
    height: 90px; 
 
    border: 1px solid black; 
 
    border-radius: 3px; 
 
    background-color: rgba(255, 0, 0, 0.4); 
 
    flex: 0 0 50px; 
 
    background: red; 
 
    transition: transform .25s; 
 
}

<div><button id="button">addcards</button></div> 
 
<div class='cards' id="cards"> 
 
    <div class='card'></div> 
 
    <div class='card'></div> 
 
    <div class='card'></div> 
 
    <div class='card'></div> 
 
    <div class='card'></div> 
 
    <div class='card'></div> 
 
    <div class='card'></div> 
 
    <div class='card'></div> 
 
    <div class='card'></div> 
 
</div>

來源

2017-05-11 15:39:19

雖然不是flex，但這是一個很好的解決方案。它滿足了給定空間中可變數量卡片的所有要求。如果任何人仍然有靈活的解決方案，我很樂意聽到它，但截至目前，這是一個足夠好的答案。 –

@MichaelArrison真棒，很高興它的作品。 –

@MichaelArrison別人回答說你可以使元素與'margin'重疊 - 你也可以用'transform：translateX（）'來做到這一點，就像我在這裏所做的那樣，但是這樣做不會影響你的佈局，所以我沒有不會使用它。你需要一些數學（我認爲）來做到這一點。但是我更新了我的答案，因爲你在原始問題中使用了flex和transform。 –

Flex容器被設計成對準沿着X和Y軸項。

您在詢問沿Z軸的對齊方式。

Flexbox不適用於z軸對齊（重疊）。

任何重疊都必須來自負邊距，絕對定位，CSS網格佈局，JavaScript或其他。 z-index財產也可能需要發揮作用。

下面是使用CSS網格一個基本的例子：

.cards { 
 
    display: grid; 
 
    grid-template-columns: repeat(30, 10px); 
 
    grid-template-rows: 90px; 
 
    max-width: 300px; 
 
} 
 

 
.card { 
 
    grid-row-start: 1; 
 
    background-color: lightgreen; 
 
    border: 1px solid black; 
 
} 
 

 
.card:nth-child(1) { grid-column: 1/6; } 
 
.card:nth-child(2) { grid-column: 4/9; } 
 
.card:nth-child(3) { grid-column: 7/12; } 
 
.card:nth-child(4) { grid-column: 10/15; } 
 
.card:nth-child(5) { grid-column: 13/18; } 
 
.card:nth-child(6) { grid-column: 16/21; } 
 
.card:nth-child(7) { grid-column: 19/24; } 
 
.card:nth-child(8) { grid-column: 22/27; } 
 
.card:nth-child(9) { grid-column: 25/30; }

<div class='cards'> 
 
    <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 class='card'>6</div> 
 
    <div class='card'>7</div> 
 
    <div class='card'>8</div> 
 
    <div class='card'>9</div> 
 
</div>

卡是由使用基於行的位置重疊。在這種情況下，grid-column屬性用於使列軌跡重疊。

但是，如果卡的數量動態變化，則需要一些腳本，因爲重疊量需要變化才能使所有卡精確地安裝在固定寬度的容器中。

來源

2017-05-11 15:20:21

儘管一張卡片應該位於下一張，但這不是重要的問題。重要的問題是讓它們在x軸上重疊。 Flex容器有許多沿x軸對齊的選項。但我不確定它是否有重疊。 –

我認爲使用jquery，你可以從第二張牌開始向左邊距上放置一個公式，它將動態計算並重疊牌。如果你想我可以讓你成爲一個例子。 –

@NasirT提出了一個很好的觀點，雖然它可以簡化爲純CSS。像.card：nth-child（n + 2）{margin-left：-30px; }如果提前知道卡片的數量，它將非常有效。 –

可以使用margin屬性做到這一點，並適用於您手動或JS想要的物品。

.cards { 
 
    display: flex; 
 
    max-width: 300px; 
 
} 
 

 
.overl { 
 
margin-left:-10px; 
 
} 
 

 
.card { 
 
    width: 50px; 
 
    height: 90px; 
 
    border: 1px solid black; 
 
    border-radius: 3px; 
 
    background-color: rgba(255, 0, 0, 0.4); 
 
}

<div class='cards'> 
 
    <div class='card'></div> 
 
    <div class='card overl'></div> 
 
    <div class='card'></div> 
 
    <div class='card'></div> 
 
    <div class='card'></div> 
 
    <div class='card'></div> 
 
    <div class='card'></div> 
 
    <div class='card'></div> 
 
    <div class='card'></div> 
 
</div>

來源

2017-05-11 15:42:52 Sam

使柔性物品重疊

回答

相關問題