CSS Flexbox'ta neden “haklı göster maddeleri” ve “haklı göster” özellikleri yoktur?

Esnek bir kabın ana eksenini ve çapraz eksenini düşünün:

                                                                                                                                                   _{Kaynak: W3C}

Esnek öğeleri ana eksen boyunca hizalamak için bir özellik vardır:

• justify-content

Esnek öğeleri çapraz eksen boyunca hizalamak için üç özellik vardır:

• align-content
• align-items
• align-self

Yukarıdaki görüntüde, ana eksen yatay ve çapraz eksen dikeydir. Bunlar bir esnek kabın varsayılan yönleridir.

Bununla birlikte, bu yönler flex-directionmülkle kolayca değiştirilebilir .

/* main axis is horizontal, cross axis is vertical */
flex-direction: row;
flex-direction: row-reverse;

/* main axis is vertical, cross axis is horizontal */    
flex-direction: column;
flex-direction: column-reverse;

(Çapraz eksen her zaman ana eksene diktir.)

Eksenlerin nasıl çalıştığını tarif etmemdeki amacım, her iki yönde de özel bir şey olmadığıdır. Ana eksen, çapraz eksen, ikisi de önem açısından eşittir flex-directionve ileri geri geçişi kolaylaştırır.

Öyleyse çapraz eksen neden iki ek hizalama özelliği alıyor?

Ana eksen için neden tek bir mülkte birleştirilir align-contentve align-itemsbirleştirilir?

Ana eksen neden bir justify-selfözellik almıyor ?

Bu özelliklerin yararlı olacağı senaryolar:

• esnek kabın köşesine esnek bir eşya yerleştirme
  #box3 { align-self: flex-end; justify-self: flex-end; }

• bir grup esnek öğeyi sağa hizala ( justify-content: flex-end) ancak ilk öğeyi sola hizala ( justify-self: flex-start)

  Bir grup gezinme öğesi ve bir logo içeren bir başlık bölümü düşünün. İle justify-selflogo nav ürün sağında kalırken sola hizalanmış ve farklı ekran boyutlarına sorunsuz her şey ayarlanabilece¤inden ( "esner") olabilir.

• üç esnek öğeden oluşan bir satırda, orta öğeyi kabın ortasına ( justify-content: center) yapıştırın ve bitişik öğeleri kap kenarlarına ( justify-self: flex-startve justify-self: flex-end) hizalayın .

  Bitişik öğeler farklı genişliklere sahipse, değerler space-aroundve space-betweenon justify-contentözelliğinin orta öğeyi kap etrafında ortalamayacağını unutmayın.

#container {
  display: flex;
  justify-content: space-between;
  background-color: lightyellow;
}
.box {
  height: 50px;
  width: 75px;
  background-color: springgreen;
}
.box1 {
  width: 100px;
}
.box3 {
  width: 200px;
}
#center {
  text-align: center;
  margin-bottom: 5px;
}
#center > span {
  background-color: aqua;
  padding: 2px;
}

<div id="center">
  <span>TRUE CENTER</span>
</div>

<div id="container">
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
</div>

<p>note that the middlebox will only be truly centered if adjacent boxes are equal width</p>

jsFiddle sürümü

Bu yazı gibi, hiç söz yoktur justify-selfya justify-itemsiçinde FlexBox spec .

Bununla birlikte, W3C'nin tüm kutu modellerinde kullanılmak üzere ortak bir hizalama özellikleri seti oluşturmak için tamamlanmamış önerisi olan CSS Kutusu Hizalama Modülünde , aşağıdakiler vardır:

                                                                                                                                                   _{Kaynak: W3C}

Bunu fark edeceksiniz justify-selfve justify-itemsdüşünülüyor ... ama flexbox için değil .

Ana soruyu tekrarlayarak bitireceğim:

Neden "bloklama ögeleri" ve "bloklama-kendi kendine" özellikleri yoktur?

Esnek Öğeleri Ana Eksen Boyunca Hizalama Yöntemleri

Soruda belirtildiği gibi:

Esnek öğeleri ana eksen boyunca hizalamak için bir özellik vardır: justify-content

Çapraz eksen boyunca hizalamak esnek öğeler için orada üç özellikler şunlardır: align-content, align-itemsvealign-self .

Soru daha sonra şunu sorar:

Neden hayır justify-itemsve justify-selfözellikler var?

Bir cevap şunlar olabilir: Çünkü gerekli değiller.

FlexBox özellikleri sağlar iki ana eksen boyunca esnek ürün hizalanması için yöntemler:

1. justify-contentAnahtar kelime özelliğinin ve
2. auto marjlar

haklı-content

justify-contentMülkiyet hizalar esnek kabın ana eksen boyunca öğeleri esnetin.

Esnek konteynere uygulanır, ancak sadece esnek maddeleri etkiler.

Beş hizalama seçeneği vardır:

• flex-start ~ Esnek eşyalar hattın başına doğru paketlenir.

  

• flex-end ~ Esnek eşyalar hattın sonuna doğru paketlenir.

  

• center ~ Esnek eşyalar hattın merkezine doğru paketlenir.

  

• space-between• Esnek öğeler, ilk öğe kabın bir kenarına ve son öğe karşı kenara hizalanacak şekilde eşit aralıklarla yerleştirilir. İlk ve son öğeye kullandığı kenarları bağlıdır flex-directionve yazma modunda ( ltrveya rtl).

  

• space-around~ space-betweenHer iki uçtaki yarım boyutlu boşluklar hariç.

  

Otomatik Kenar Boşlukları

İle automarjlar , esnek ürün, merkezli uzak aralıklı veya alt gruba paketlenmiş olabilir.

justify-contentEsnek konteynere uygulananın aksine , automarjlar esnek ürünlere gider.

Belirtilen yönde tüm boş alanları tüketerek çalışırlar.

Esnek öğe grubunu sağa, ancak ilk öğe sola hizala

Sorudan senaryo:

• bir grup esnek öğeyi sağa hizala ( justify-content: flex-end) ancak ilk öğeyi sola hizala ( justify-self: flex-start)

  Bir grup gezinme öğesi ve bir logo içeren bir başlık bölümü düşünün. İle justify-selflogo nav ürün sağında kalırken sola hizalanmış ve farklı ekran boyutlarına sorunsuz her şey ayarlanabilece¤inden ( "esner") olabilir.

Diğer faydalı senaryolar:

Köşeye esnek bir öğe yerleştirin

Sorudan senaryo:

• köşeye esnek bir eşya yerleştirme .box { align-self: flex-end; justify-self: flex-end; }

Esnek bir öğeyi dikey ve yatay olarak ortalayın

margin: autoBir alternatif olan justify-content: centerve align-items: center.

Esnek kaptaki bu kod yerine:

.container {
    justify-content: center;
    align-items: center;
}

Bunu flex öğesinde kullanabilirsiniz:

.box56 {
    margin: auto;
}

Bu alternatif, kabı taşan esnek bir öğeyi ortalarken yararlıdır .

Bir esnek öğeyi ortalayın ve ikinci bir esnek öğeyi ilk ve kenar arasında ortalayın

Esnek bir kap, boş alanları dağıtarak esnek öğeleri hizalar.

Bu nedenle, eşit bir denge oluşturmak için, bir orta öğenin yanında tek bir öğeyle birlikte ortalanabilmesi için bir karşı denge sunulmalıdır.

Aşağıdaki örneklerde, "gerçek" öğeleri (kutu 63 ve 66) dengelemek için görünmez üçüncü esnek kalemler (kutular 61 ve 68) tanıtılmaktadır.

Tabii ki, bu yöntem anlambilim açısından harika bir şey değildir.

Alternatif olarak, gerçek bir DOM öğesi yerine bir sözde öğe kullanabilirsiniz. Veya mutlak konumlandırma kullanabilirsiniz. Üç yöntemin tümü burada ele alınmıştır: Esnek öğeleri ortala ve alta hizala

NOT: Yukarıdaki örnekler, yalnızca en dıştaki öğeler eşit yükseklik / genişlik olduğunda gerçek merkezleme açısından çalışır. Esnek öğeler farklı uzunluklarda olduğunda, bir sonraki örneğe bakın.

Bitişik öğelerin boyutu değiştiğinde esnek bir öğeyi ortalayın

Sorudan senaryo:

• üç esnek öğeden oluşan bir satırda, orta öğeyi kabın ortasına ( justify-content: center) yapıştırın ve bitişik öğeleri kap kenarlarına ( justify-self: flex-startve justify-self: flex-end) hizalayın .

  Değerleri bu Not space-aroundve space-betweenüzerinde justify-contentbitişik öğeleri farklı genişlikleri (varsa mülkiyet orta öğeyi tutmayacaktır konteyner ile ilgili olarak merkezli demo bakınız ).

Belirtildiği gibi, tüm esnek öğeler eşit genişliğe veya yüksekliğe (bağlı olarak flex-direction) sahip olmadıkça , orta öğe tam olarak ortalanamaz. Bu sorun, bir justify-selfmülk için güçlü bir durum oluşturur (elbette görevi yerine getirmek için tasarlanmıştır).

#container {
  display: flex;
  justify-content: space-between;
  background-color: lightyellow;
}
.box {
  height: 50px;
  width: 75px;
  background-color: springgreen;
}
.box1 {
  width: 100px;
}
.box3 {
  width: 200px;
}
#center {
  text-align: center;
  margin-bottom: 5px;
}
#center > span {
  background-color: aqua;
  padding: 2px;
}

<div id="center">
  <span>TRUE CENTER</span>
</div>

<div id="container">
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
</div>

<p>The middle box will be truly centered only if adjacent boxes are equal width.</p>

İşte bu sorunu çözmek için iki yöntem:

Çözüm # 1: Mutlak Konumlandırma

Flexbox spec esnek öğelerin mutlak konumlandırılmasını sağlar . Bu, orta öğenin kardeşlerinin boyutundan bağımsız olarak mükemmel bir şekilde merkezlenmesini sağlar.

Kesinlikle konumlandırılmış tüm öğeler gibi, öğelerin de belge akışından kaldırıldığını unutmayın . Bu, kapta yer kaplamaz ve kardeşlerini üst üste binebilecekleri anlamına gelir.

Aşağıdaki örneklerde, orta öğe mutlak konumlandırma ile ortalanmıştır ve dış öğeler akış halinde kalır. Ancak aynı düzen ters yönde de elde edilebilir: Orta öğeyi justify-content: centerdış öğelerle ortalayın ve kesinlikle konumlandırın.

Çözüm # 2: İç içe Esnek Konteynerler (mutlak konumlandırma yok)

.container {
  display: flex;
}
.box {
  flex: 1;
  display: flex;
  justify-content: center;
}
.box71 > span { margin-right: auto; }
.box73 > span { margin-left: auto;  }

/* non-essential */
.box {
  align-items: center;
  border: 1px solid #ccc;
  background-color: lightgreen;
  height: 40px;
}

<div class="container">
  <div class="box box71"><span>71 short</span></div>
  <div class="box box72"><span>72 centered</span></div>
  <div class="box box73"><span>73 loooooooooooooooong</span></div>
</div>

Şöyle çalışır:

• Üst düzey div ( .container) esnek bir kaptır.
• Her alt div ( .box) şimdi esnek bir öğedir.
• Her .boxmadde flex: 1konteyner alanını eşit dağıtmak için verilmiştir .
• Şimdi öğeler sıradaki tüm alanı tüketiyor ve eşit genişlikte.
• Her öğeyi (iç içe) esnek bir kap yapın ve ekleyin justify-content: center.
• Şimdi her spanöğe ortalanmış bir esnek öğedir.
• autoDış spantarafları sola ve sağa kaydırmak için esnek kenar boşluklarını kullanın .

Ayrıca, yalnızca kenar boşluklarını kaldırabilir justify-contentve kullanabilirsiniz auto.

Ancak justify-contentburada çalışabilir, çünkü autokenar boşlukları her zaman önceliğe sahiptir. Spec'ten:

8.1. auto Kenar boşluklarıyla hizalama

İle hizalanabilmektedir önce justify-contentve align-selfherhangi bir pozitif serbest alanının boyutunun otomatik kenar dağıtılır.

justify-content: space-same (kavram)

justify-contentBir dakika geri dönersek, bir seçenek daha için bir fikir.

• space-same~ Bir hibrit space-betweenve space-around. Esnek öğeler eşit aralıklarla yerleştirilir (gibi space-between), her iki uçta yarım boyutlu boşluklar (gibi ) dışında her iki uçta space-aroundda tam boyutlu boşluklar bulunur.

Bu düzen esnek kap üzerinde ::beforeve ::aftersözde elemanlarla elde edilebilir .

^{(kredi: kod için @oriol ve etiket için @crl )}

GÜNCELLEME: Tarayıcılar space-evenly, yukarıda belirtilenleri gerçekleştirmeye başlamışlardır . Ayrıntılar için bu gönderiye bakın: Esnek öğeler arasında eşit boşluk

PLAYGROUND (yukarıdaki tüm örnekler için kod içerir)

Bunun bir cevap olmadığını biliyorum, ama bu konunun değerine katkıda bulunmak istiyorum. justify-selfFlexbox'ı gerçekten esnek hale getirmek için serbest bırakabilirlerse harika olurdu .

Eksene göre, eksen üzerinde birden fazla öğe olduğunda, justify-selfdavranmanın en mantıklı yolu, kendisini aşağıda gösterildiği gibi en yakın komşularına (veya kenarına) hizalamaktır.

Umarım W3C bunu fark eder ve en azından dikkate alır. =)

Bu şekilde, sol ve sağ kutunun boyutundan bağımsız olarak gerçekten ortalanmış bir öğeye sahip olabilirsiniz. Kutulardan biri orta kutunun noktasına ulaştığında dağıtılacak yer kalmayıncaya kadar itecektir.

Harika düzenler yapmanın kolaylığı sonsuzdur, bu "karmaşık" örneğe bir göz atın.

Bu www-stil listesinde soruldu ve Tab Atkins (spec editörü) nedenini açıklayan bir cevap verdi . Burada biraz ayrıntıya gireceğim.

Başlamak için, başlangıçta esnek kabımızın tek satır ( flex-wrap: nowrap) olduğunu varsayalım . Bu durumda, ana eksen ile çapraz eksen arasında açıkça bir hizalama farkı vardır - ana eksende istiflenmiş birden fazla öğe vardır, ancak çapraz eksende yalnızca bir öğe istiflenir. Bu nedenle, çapraz eksende öğe başına özelleştirilebilir bir "hizala-kendini" olması mantıklıdır (her öğe ayrı ayrı, kendi kendine hizalandığı için), ancak ana eksende (oradan, öğeler toplu olarak hizalanır).

Çok satırlı esnek kutu için, aynı mantık her "esnek hat" için geçerlidir. Belirli bir satırda, öğeler ana eksende topluca çapraz eksende (çapraz eksende her satırda yalnızca bir öğe olduğundan) tek tek hizalanır.

İşte phrasing başka yolu: böylece, bütün bir *-selfve *-contentözellikleri şeylerin etrafında fazladan alan dağıtma hakkında bulunmaktadır. Ama önemli fark olduğunu *-selfversiyonları var durumlarda içindir o eksende sadece tek şey , ve *-contentversiyonları potansiyel varken içindir o eksende pek çok şey . Tek şey ve çok şey senaryoları farklı sorun türleridir ve bu nedenle farklı seçenek türlerine sahiptirler - örneğin, space-around/ space-betweendeğerleri mantıklıdır *-content, ancak değil *-self.

SO: Bir flexbox'ın ana ekseninde, etrafa alan dağıtacak birçok şey var. Yani bir *-contentmülk orada anlamlıdır, ama bir *-selfmülk değildir .

Buna karşılık, çapraz eksende, biz a ikisine de sahip *-selfve bir *-contentözellik. Bir çok alanı nasıl dağıtacağımızı belirler esnek çizginin ( align-content) align-selfetrafına nasıl dağıtacağımızı belirler , diğeri ( ) ise belirli bir esnek çizgide çapraz eksendeki münferit esnek nesnelerin etrafındaki boşluğun nasıl dağıtılacağını belirler .

( *-itemsBurada varsayılanları yok saydığım için özellikleri görmezden geliyorum *-self.)

Bunun flexbox kullanmadığını biliyorum, ancak üç öğenin basit kullanımı için (biri solda, biri merkezde, biri sağda), bu display: gridebeveyn grid-area: 1/1/1/1;üzerinde, çocuklarda ve justify-selfkonumlandırmada kolayca yapılabilir bu çocukların.

<div style="border: 1px solid red; display: grid; width: 100px; height: 25px;">
  <div style="border: 1px solid blue; width: 25px; grid-area: 1/1/1/1; justify-self: left;"></div>
  <div style="border: 1px solid blue; width: 25px; grid-area: 1/1/1/1; justify-self: center;"></div>
  <div style="border: 1px solid blue; width: 25px; grid-area: 1/1/1/1; justify-self: right;"></div>
</div>

Bu soruna ya da en azından sorunuma kendi çözümümü buldum.
Onun justify-content: space-aroundyerine kullanıyordum justify-content: space-between;.

Bu şekilde uç elemanlar üste ve alta yapışır ve isterseniz özel kenar boşluklarınız olabilir.