CSS flex：行選擇器中的最後一項和第一項

我在嘗試選擇第一行的最後一個元素和flex容器的最後一行的第一個元素時出現問題。CSS flex：行選擇器中的最後一項和第一項

我的Flex容器flex-wrap: wrap;和我的所有元素都是flex: auto;，他們有不同的尺寸，並通過柔性自動我讓元素適合像我的容器上證明，我的角元件都有各自的角落四捨五入。

但是，問題是，我隱藏並顯示事件的元素（如點擊），我需要設置角元素每次更改時舍入，如果它有一個網格容器，我可以選擇nth-child，因爲它永遠不會改變列的數量。但在flex中每行的元素數量不同。

我想出了一個Jquery解決方案（下面鏈接），但我認爲這是對ogle和大，可能有一個更聰明的方式或我不能使用一個簡單的選擇。

請幫我想出一個更好的代碼，所以不僅僅是我不能很好地使用它。

http://jsfiddle.net/aj1vk0rv/

編輯：只是提高了位代碼 http://jsfiddle.net/aj1vk0rv/1/

來源

2015-02-06 TheLinthus

這是一個非常好的問題。我們需要一些僞類來執行這個操作，例如'：main-axis-first'和'：main-axis-last'或類似的東西。這會很好，但不幸的是，這樣的事情在規範中不存在。你可以建議它，但工作的人... – 2015-02-09 19:58:20

你可以讓它爲每一行創建一個新元素，而不是製作一個盒子，然後使用'：first-child'。 – Rorschach120 2015-03-26 16:19:56

即使這個問題是輕微不同的答案在http://stackoverflow.com/questions/28580851/which-css-selector-can-be-used-to-select-a-flex-box-item-in-wrapped - 狀態仍然適合這裏 – Luizgrs 2015-03-30 14:30:24

我看不出有任何簡單的解決辦法，但這種方式是一點點乾淨：

var fun = function() { 
var flex = $(".container"); 
var cw = flex.width(); // container width 
var ch = flex.height(); // container height 

var tl = $(".ui-widget:visible:first"); 
var tr = $(".ui-widget:visible").closestToOffset({left: cw-20, top: -20}); 
var bl = $(".ui-widget:visible").closestToOffset({left: 0+20, top: ch+20}); 
// those '20's are to to throw away from the others elements 
var br = $(".ui-widget:visible:last"); 

$(".ui-widget").removeClass(function (index, css) { 
    return (css.match(/\ui-corner-\S+/g) || []).join(' '); 
}); 

tl.addClass("ui-corner-tl"); 
tr.addClass("ui-corner-tr"); 
bl.addClass("ui-corner-bl"); 
br.addClass("ui-corner-br");

來源

2015-03-31 15:22:52

CSS flex：行選擇器中的最後一項和第一項

回答

相關問題