Align-content ve align-items arasındaki fark nedir?

Herkes beni arasındaki farkı gösterebilir align-itemsve align-content?

align-itemsFlex-box malı gibi çapraz eksen boyunca bir esnek kabın içine öğeleri hizalar justify-contentana eksen boyunca yapar. (Varsayılan değer flex-direction: rowiçin çapraz eksen dikeye ve ana eksen yataya karşılık gelir. flex-direction: columnBu ikisi ile sırasıyla birbirinin yerine kullanılır).

İşte nasıl align-items:centergöründüğüne bir örnek :

Ancak align-contentçok hatlı esnek kutular içindir. Öğeler tek bir satırda olduğunda etkisi yoktur. Tüm yapıyı değerine göre hizalar. İşte size bir örnek align-content: space-around;:

Ve burada nasıl align-content: space-around;sahip align-items:centergörünüyor:

3. kutunun ve ilk satırdaki diğer tüm kutuların dikey olarak ortalanmış olarak değiştiğini unutmayın.

İşte oynamak için bazı kod açık bağlantıları:

http://codepen.io/asim-coder/pen/MKQWbb

http://codepen.io/asim-coder/pen/WrMNWR

İşte flexbox'ta neredeyse her şeyle oynamanızı sağlayan ve oynamanıza izin veren süper serin bir kalem.

Http://flexboxfroggy.com/ örneğini çok faydalı buluyorum .

Sizi 10-20 dakika sürecek ve 21. seviyede sorunuzun cevabını bulacaksınız. Bahsetti:

align-content , satırlar arasındaki boşluğu belirler, hizalama öğeleri ise bir bütün olarak öğelerin kap içinde nasıl hizalandığını belirler. Yalnızca bir satır olduğunda, hizalama içeriğinin bir etkisi yoktur

İlk olarak, align-itemstek bir satırdaki öğeler içindir. Böylece, ana eksendeki tek bir satır sırası için , align-itemsbu öğeleri birbirine göre hizalar ve bir sonraki satırdan yeni bir perspektifle başlar.

Şimdi, align-contentbir satırdaki öğelere değil , satırların kendisine müdahale etmiyor . Bu nedenle, align-contentsatırları birbirine göre hizalamaya ve kabı esnetmeye çalışacaktır.

Bu kemanı kontrol edin: https://jsfiddle.net/htym5zkn/8/

Aynı kafa karışıklığı yaşadım. Yukarıdaki cevapların çoğuna dayanan müdahalelerden sonra, sonunda farklılıkları görebiliyorum. Benim düşünceme göre, ayrım en iyi aşağıdaki iki koşulu karşılayan esnek bir kap ile gösterilmektedir:

1. Esnek kabın kendisinin bir yükseklik kısıtlaması vardır (örn. min-height: 60rem) Ve dolayısıyla içeriği için çok uzun olabilir
2. Konteyner içindeki alt öğelerin eşit olmayan yükseklikleri vardır

Koşul 1content , ana kabına göre ne anlama geldiğini anlamama yardımcı oluyor . İçerik kapla aynı hizada olduğunda, gelen herhangi bir konumlandırma etkisi göremeyiz align-content. Sadece çapraz eksen boyunca fazladan alanımız olduğunda, etkisini görmeye başlarız: İçeriği ana kabın sınırlarına göre hizalar.

Koşul 2 , etkilerini görselleştirmeme yardımcı oluyor align-items: öğeleri birbirine göre hizalar.

İşte bir kod örneği. Hammaddeler Wes Bos'un CSS Izgara öğreticisinden gelir (21. Flexbox ve CSS Izgara)

• Örnek HTML:

  <div class="flex-container">
    <div class="item">Short</div>
    <div class="item">Longerrrrrrrrrrrrrr</div>
    <div class="item">💩</div>
    <div class="item" id="tall">This is Many Words</div>
    <div class="item">Lorem, ipsum.</div>
    <div class="item">10</div>
    <div class="item">Snickers</div>
    <div class="item">Wes Is Cool</div>
    <div class="item">Short</div>
  </div>

• Örnek CSS:

.flex-container {
  display: flex;
  /*dictates a min-height*/
  min-height: 60rem;
  flex-flow: row wrap;
  border: 5px solid white;
  justify-content: center;
  align-items: center;
  align-content: flex-start;
 }

#tall {
  /*intentionally made tall*/
  min-height: 30rem;
}

.item {
  margin: 10px;
  max-height: 10rem;
}

Örnek 1 : İçeriği kapla aynı hizada olacak şekilde görünüm penceresini daraltalım. Bu ise align-content: flex-start;tüm içerik blok konteyner içine sığacak sıkıca nedeniyle şimdilik etkileri vardır (yeniden konumlandırılması için ekstra bir oda!)

Ayrıca, 2. sırayı not edin - öğelerin kendi aralarında nasıl ortalandığını görün.

Örnek 2 : Görünüm penceresini genişlettikçe, artık tüm kapsayıcıyı dolduracak kadar içeriğimiz yok. Şimdi align-content: flex-start;--it'in etkilerini , kabın üst kenarına göre hizalar.

Bu örnekler flexbox'a dayanmaktadır, ancak aynı prensipler CSS ızgarası için de geçerlidir. Bu yardımcı olur umarım :)

Onları tarayıcımda inceledim.

align-content's değeri gerdırılerek sütun için satır yönünde veya genişlik için hat yüksekliğini değiştirmek ya da bunların arasında ya da için hatları etrafında boş alanı ekleyebilir space-between, space-around, flex-start, flex-end values.

align-itemssatır alanının içindeki öğelerin yüksekliğini veya konumunu değiştirebilir. Öğeler sarılmadığında, alanının her zaman esnek kutu alanına gerildiği (öğeler taşmış olsa bile) align-contentyalnızca tek bir çizgisi vardır ve tek bir satır üzerinde hiçbir etkisi yoktur. Bu nedenle, sarılmamış öğeler üzerinde hiçbir etkisi yoktur ve yalnızca align-itemstek bir satırdayken öğelerin konumunu değiştirebilir veya esnetebilir.

Ancak, bunlar sarılırsa, her satırın içinde birden fazla satır ve öğe bulunur. Ve her satırdaki tüm öğeler aynı yüksekliğe (satır yönü için) sahipse, satırın yüksekliği bu öğelerin yüksekliğine eşit olur ve align-itemsdeğeri değiştirerek herhangi bir etki görmezsiniz .

Öyleyse align-items, öğeleriniz sarıldığında ve aynı yüksekliğe (satır yönü için) sahip olduklarında öğeleri etkilemek istiyorsanız, önce align-contentsatır alanını genişletmek için streç değeri ile kullanmanız gerekir .

hizalama-content

align-contentkontrol çapraz ekseni (diğer bir deyişle dikey ise yönde flex-directionolduğu rowtakdirde, yatay flex-directionolan columnbir konumlandırma) birden çok birbirine göre hatları.

(Bir paragrafın satırlarının dikey olarak dağıldığını, yukarı doğru yığılmış, altına doğru yığılmış olduğunu düşünün. Bu bir flex-directionsatır paradigmasının altındadır ).

hizalama-ürün

align-items tek bir esnek elemanlar hattının çapraz eksenini kontrol eder.

(Normal bir metin ve matematik denklemleri gibi daha uzun bir metin içeriyorsa, paragrafın tek bir satırının nasıl hizalandığını düşünün. Bu durumda, satırdaki her bir metin türünün alt, üst veya ortası olur hizalanmış mı?)

Her cevaptan öğrendiğim ve blogu ziyaret ettiğim

çapraz eksen ve ana eksen nedir

• ana eksen yatay sıra ve çapraz eksen dikey sütundur - flex-direction: row
• ana eksen dikey sütun ve çapraz eksen yatay sıra - için flex-direction: column

Şimdi içeriği hizala ve öğeleri hizala

align-content satır içindir, kapsayıcıda (birden fazla satır) hizalama içeriği özellikleri varsa çalışır

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

align-items , satır öğelerindeki öğeler içindir.

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

Daha fazla referans için flex ziyaret

Temel fark, elemanların yüksekliği aynı olmadığındadır! Sonra satırda nasıl olduğunu görebilirsiniz, hepsi center \ end \ start

buradan anladığım şeye göre :

hizalama öğesi veya iki yana yaslama öğesi kullandığınızda, "bir ızgara öğesinin içindeki içeriği sırasıyla sütun ekseni veya satır ekseni boyunca ayarlarsınız.

Ancak: hizalama içeriği veya bloklama içeriği kullanıyorsanız, sütun ekseni veya satır ekseni boyunca bir ızgara konumu ayarlıyorsunuz. daha büyük bir kapta bir ızgaraya sahip olduğunuzda ve genişlik veya yükseklik esnek olmadığında (px kullanarak) oluşur.