CSS flex: bir satır seçicideki son ve ilk öğe

Question

İlk satırın son öğesini ve bir esnek kabın son satırının ilk öğesini seçmeye çalışırken bir sorun yaşıyorum.

Benim esnek kapsayıcım flex-wrap: wrap; ve tüm öğelerim flex: auto; ve farklı boyutlara sahipler ve esnek otomatik olarak öğelerin benim kapsayıcımda haklı gibi görünmesini sağlarım ve köşe öğelerinin ilgili köşeleri yuvarlatılmış olur.

Ancak, sorun şu ki, saklıyorum ve öğeleri olaylarla (tıklatmada olduğu gibi) saklıyorum ve değiştiğinde her köşesinde yuvarlatılmış öğeleri ayarlamanız gerekiyor. nth-child çünkü hiçbir zaman sütun sayısını değiştirmez. Ancak flekste sıra başına farklı sayıda eleman var.

Bir Jquery çözümü ile geldim (bağlantı aşağı körük), ama sanırım ogle ve büyük, daha akıllı bir yol veya kullanamadığım basit bir seçici olabilir.

Lütfen daha iyi bir kod bulmama yardımcı olun, bu yüzden sadece iyi bir şekilde kullanamıyorum.

http://jsfiddle.net/aj1vk0rv/

düzenleme: sadece biraz http://jsfiddle.net/aj1vk0rv/1/

Answer 1

herhangi basit bir çözüm görmüyorum kod geliştirilmiş, ancak bu şekilde temiz biraz geçerli:

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");