Önce şunu söyleyeyim: flexbox kolaydır. Erken evlat edinme sorunları yüzünden mi, yoksa yüzer ve bloklar açısından düşünmeyi öğrendiğimiz için, sık sık web tasarımcılarından Flexbox'ın uygulamak için karmaşık olduğunu düşündüklerini duyuyorum. Ama tekrar ediyorum: flexbox kolaydır.
Size öğreteceğim esnek kutuyu anlamak için bir numara var, bundan sonra her şey açık olacak. Ama önce, esnek kutunun ne olduğu hakkında konuşmak istiyorum.
Flexbox (veya Esnek Kutu Düzeni Modülü doğru adını vermek için), içeriği uyumlu bir şekilde düzenlemek için bir araya gelen bir CSS özellikleri grubudur.
Flexbox, modern web için çalışan ilk CSS düzeni tekniğidir. Flexbox desteklenene kadar, yanıt veren web tasarımı ile iyi çalışan bir düzen tekniği olmadığını söylemek doğru olur.
Öğelerin ayarlanması gibi satır içi bolca vuruyordu: satır içi blok ve sarmak için. Ancak bu, esnek bölgeler için bir dizi problem ortaya koydu, en azından kontrol eksikliği ve yeniden boyutlandırma elemanlarının knock-on etkisi. Bu nedenle, birçok yanıt veren web sitesi, içeriği konumlandırmak için JavaScript kullanmaktadır.
Flexbox, W3C tarafından, UI öğelerini (menü öğeleri gibi şeyler) yerleştirmek için tasarlandığı şekilde tanımlanmıştır; bu, tüm sayfaları ortaya çıkarmak için tasarlanmamıştır.
Tüm sayfaların düzeni için tasarlanmamış olması nedeni, flexbox'ın bir tamamlayıcı CSS modülüne sahip olmasıdır. Izgara Düzeni Modülü düzeni için tasarlanmıştır. Izgara Yerleşimi , tam sayfa düzenleri için en uygun teknik olarak kabul edilir. Ne yazık ki, şu anda şebeke için çok sınırlı bir destek var ve 'sınırlı' ile 'yok' demek istiyorum. Chrome'un en son sürümü bile bayraksız desteklemiyor.
Esnek kutu için mutlu bir tarayıcı desteği çok daha kapsamlı. Ve çok modern düzen problemlerini çözdüğü için, flexbox, ızgara nihayet kabul edilene kadar ideal bir araçtır.
Flexbox, bir sayfadaki bileşenleri şekillendirmek için idealdir. Flexbox'ın gerçek gücü ve diğer düzen seçeneklerinden çok daha iyi çalışmasının sebebi, bireysel öğeler yerine ürün grupları üzerindeki stilleri bildirmekten geliyor.
Düzenleme söz konusu olduğunda, nadiren tek bir öğeyi konumlandırmamız gerekir - bunu yapmayı planlıyorsak, konumlandırmayı kullanmak daha iyidir. Flexbox, eleman gruplarının birbiriyle nasıl ilişkilendiğini kontrol ettiğinde en iyi şekilde çalışır.
Her zaman bir sonraki büyük bağlamında bir şey tasarlayın - bir odada bir sandalye, bir evde bir oda, bir ortamda bir ev, bir şehir planında bir ortam. - Eliel Saarinen
Bu şekilde, flexbox spesifikasyonu iki parçaya bölünmüştür, bir konteynır elemanına değinen özellikler kümesi ve içindeki elementlere değinen bir özellik kümesi.
Tarayıcı desteği tipik olarak karmaşık bir sorudur. Flexbox için birçok daha karmaşık olan, çünkü flexbox birkaç farklı sözdizimine sahiptir. Erken kararsızlık, bazı tarayıcı tedarikçilerinin bağımsız gelişimi ve yinelemeli bir süreç, bizi tüm ihtiyaçların karşılanması için bir kaç farklı esnek kutuda bıraktı.
Artık eski tarayıcılar için bazı tarayıcı öneklerinin eklenmesiyle artık güvenebiliyoruz. Göre caniuse.com , mevcut ana tarayıcıların sadece IE9, bizim için bir sorun sunacak.
Neyse ki, tüm CSS'ler gibi, eğer flexbox başarısız olursa, sessizce başarısız olur. Yani IE9 bunu görmezden gelecektir.
Komitelerin ve kurumların çeşitli şubeleri arasında şaşırtıcı bir işbirliği eksikliği nedeniyle, flexbox'ın uygulaması, her bir tarayıcının her bir özelliği benzersiz bir şekilde ve yanlış bir şekilde aynı anda uyguladığı ilk 100'lerin kargaşasına neredeyse rakip olmuştur. Herkesten herkese şüphe uyandıran, flexbox'ın üç uygulaması, en yararlı ortak çözümle sonuçlanan yinelemeli bir yaklaşımdı.
Aşağıdakiler hakkında bilmeniz gereken esnek kutu sözdiziminin üç sürümü vardır: eski, arada ve yeni. Farklı tarayıcılar farklı sözdizimlerini destekler, örneğin IE10 sözdizimini destekler.
Tarayıcı önekleri gibi, en eskiden en yeniye Flexbox sözdizimi yazıyoruz, böylece en yeni desteklenen sözdizimi eski sözdizimlerini geçersiz kılar.
Örneğin, ekran yazıyoruz:
display:-webkit-box; /*old prefixed for webkit*/display:-moz-box; /*old prefixed for mozilla*/display:-ms-flexbox; /*inbetween prefixed for ie*/display:-webkit-flex; /*new prefixed for webkit*/display:flex; /*new*/Açıklık açısından, eski sözdizimlerine dalmayacağım ya da ön işlemcilerin, işlemcilerin ve farklı dönüştürme komutlarının değerlerini tartışmayacağım. Tüm örneklerimde doğru, yeni sözdizimini kullanacağım.
Üretim koduna gelince, eski tarayıcılara flexbox desteğini genişletmek için bir seri Sass mixins kullanıyorum.
Mükemmel Sass burada mixin Kodunuzun şişmesini önlemek için kullanabilir veya eski sözdizimini ayıklayabilirsiniz.
Flexbox'ın sırrı, bir kutu olmaması. Şimdiye kadar, Web'deki tüm düzen noktaları çizmek için x ve y kartezyen sistemini kullandı. Tersine, Flexbox bir vektördür.
Kulağa harika geliyor, değil mi? Flexbox bir vektör, yani bir uzunluk tanımladığımız ve bir açıyı tanımladığımız anlamına geliyor. Uzunluğu etkilemeden açıyı değiştirebiliriz; ve açıyı etkilemeden uzunluğu değiştirebiliriz.
Bu yeni yaklaşım, bazı flexbox terminolojilerinin başlangıçta karmaşık olduğu anlamına gelir. Örneğin, öğeleri esnek bir kabın üst kısmına hizaladığımızda , üst kısımda değil , esnek başlangıç kullanırız; çünkü yönünü değiştirirsek, esnek başlangıç geçerli olur, ancak üstte olmaz.
Bu yaklaşımı anladıktan sonra, bir çok esnek kutu ortaya çıkıyor.
Flexbox'ın sözdizimi iki gruba ayrılır: konteynırı kontrol eden özellikler ve konteynerin doğrudan torunlarını kontrol eden özellikler. İlk en kullanışlı olanı, o yüzden başlayalım.
Diyelim ki bir blok içindeki öğeleri dışarıda bırakmak istiyoruz. Bunların eşit aralıklarla olmasını istiyoruz. Flexbox kullanmak gerçekten çok kolay. İhtiyacımız olan ilk şey, bunu denemek için bazı işaretlemelerdir:
Flexbox Layout Bu bir basit HTML sayfası Bir ev div ile, her biri kendi fonksiyonlarını, mutfağını, tuvaleti, salonu ve yatak odasını tanımlayan bir sınıfa sahip beş oda divesi içerir .
Yapacağımız şey, evi bir esnek kutu konteyneri olarak ayarlamak. Evde kurduğumuz tüm flexbox özellikleri çocuklarına ( odanın ) uygulanacaktır.
Odanın düzenini yapabilmek için önce evi bir flexbox konteyner olarak ilan etmemiz ve ardından çocuk elemanlarının nasıl düzenlendiğini anlatmamız gerekir.
Evi bir flexbox konteyner olarak ilan etmek için aşağıdaki kodu kullanırız:
.house {background:#FF5651;display:flex;}Ve bu kadar. Esnek bir kutu oluşturduk. Şimdi tek yapmamız gereken, flexbox'a odanın nasıl düzenlendiğini anlatmak. Bunu haklı içerik özelliğini kullanarak yapabiliriz.
Yaslama-içeriğinin beş olası değeri vardır: merkez, esnek başlangıç, esnek uç, uzayın çevresinde ve boşluk-arasında. Bunlar, öğeleri ortalar, onları (aşağıda tartışacağımız gibi üst veya sol) hizalar, son (ya altta ya da sağda), her bir öğenin etrafında eşit boşluk bırakarak ya da sırasıyla, her öğe arasında eşit boşluk.
Uzayda kullanacağız:
.house {background:#FF5651;display:flex;justify-content: space-around;}İşte bir demo . İki dış kenarda olduğu gibi öğeler arasındaki boşluğun iki katı olduğuna dikkat edin? Çünkü her bir madde solda ve sağda aynı alana sahip. Bunun yerine boşluk kullanmış olsaydık, kenarlarda boşluk olmazdı.
Senden emin değilim, ama evimdeki tuvalet odandan biraz daha küçük ve küçük bir mutfağa sahip olmama rağmen, daha büyük olanı çok seveceğim. Öyleyse, kodumuzu yansıtacak bazı eklemeler yapalım:
.kitchen {width:300px;height:300px;}.washroom {width:45px;height:60px;}Görebildiğin gibi bu örnek Odalarımız hala eşit aralıklıdır. Boyutu değiştirsek bile. Flexbox içerik düzenleme konusunda mükemmeldir.
Yukarıda tartıştığımız gibi, flexbox'ın tasarımcılar için bu kadar iyi çalışmasının nedenlerinden biri, bir vektör olarak tanımlanmasıdır. Şu anda, flexbox sadece dört açıyı desteklemektedir: 0, 90, 180 ve 270 derece. Yani onları bir eksen olarak düşünmek çok daha basit.
Ekseni değiştirmek için, dört olası değere sahip olan esnek yön özelliğini kullanırız: satır (varsayılan - yukarıdaki örneklerde gördüğünüz gibi, odalarımız soldan sağa doğru yerleştirilir), satır tersi, sütun ve sütun ters.
Esnek yönü sütuna değiştirirsek görürsünüz. bu demoda Odalar şimdi dikey olarak yukarıdan aşağıya doğru döşenmiştir:
.house {background:#FF5651;display:flex;justify-content: space-around;flex-direction:column;}Tahmin edebileceğiniz gibi, esnek konteynerinizdeki öğelerin sırasını tersine çevirip, sütun-tersini tersine çevirebilirsiniz.
Son örnekte, evin görüntü alanı boyunca uzanırken, esnek yön: sütununa ayarlandığında bile tam yüksekliğe kadar uzandığını göreceksiniz .
CSS 'kartezyen tabanlı koordinat sistemi ile güzel bir şekilde oynamak için, flexbox konteyneri bir blok seviyesi elemanı olarak ele alınır.
Ekranda olduğu gibi : bloğun bir tamamlayıcı ekrana sahip olması: satır içi bloğu, bu nedenle görüntülemek için: flex ekrana sahiptir : inline-flex.
Flexline öğelerini mevcut bir mizanpaja bırakıyorsanız ve satırlar ve konumlandırılmış öğelerle güzel oynamak için ihtiyacınız varsa, inline-flex şu anda en kullanışlıdır.
Gördüğümüz gibi, flexbox, yatay veya dikey olarak yerleştirilip yerleştirilmediğine karar vermez, hangisini seçerseniz seçin, flexbox'ın birincil ekseni olarak kabul edilir.
Ancak, flexbox ayrıca, karşıt, ikincil eksen boyunca pozisyonu kontrol etmemize izin verir.
İkincil eksen üzerindeki pozisyon, align-items özelliği tarafından kontrol edilir; Beş olası değere sahiptir: taban çizgisi, merkez, esnek uç, esnek başlangıç ve esneme.
taban çizgisi normalde en kullanışlı seçenek olacaktır. Metnin temel çizgilerinin sıralanmasını sağlar. Bunu test etmek için HTML dosyamızda bazı değişiklikler yapmamız gerekiyor:
Flexbox Layout KitchenWashroomLoungeBedroomBedroomBiraz metin eklediğimi ve içe aktardığımı, ardından bir Google yazı tipi uyguladığımı göreceksiniz. Ayrıca mutfakta ve tuvaletteki yazı tipi boyutunu da değiştirdim, böylece net bir ayrım var.
Hizala öğeleri özelliğini temel çizgiye ayarladığımızda göreceksiniz bu demoda metnin taban çizgisinin eşleştiğini.
.house {background:#FF5651;display:flex;justify-content:space-around;align-items:baseline;}hizalama öğeleri: merkez merkez hizaları, dikey olarak (eğer esnek yön: satır veya esnek yön: satır-tersi ) veya yatay olarak ( esnek yönde ise: sütun veya esnek yön: sütun tersi ). İşte bir demo.
align-items: flex-start üst üste hizalar ve align-items: flex-end , ( esnek-yön: satır veya flex-direction: row-reverse ) veya sola ve sağa esnek yön: sütun veya esnek yön: sütun tersi ). İşte bir demo.
streç, başka bir son derece yararlı bir seçenektir. Gerdirme öğeleri yeniden boyutlandıracaktır, böylece her biri aynı yüksekliktedir (büyüyecek, küçülmeyecektir). İşte bir demo.
Diğer örneklerde, esnek kutuyu geçersiz kılmak için yeterli olan öğelerin yüksekliğini açıkça ayarladık. Bu nedenle hiza öğelerini görmek için : işi doğru bir şekilde genişletmek , birinden başka tüm sınıflardan yüksekliği kaldırmanız gerekir.
Şimdiye kadar, alan boyunca yeniden boyutlandırmak için mizanpaj elemanlarını flexbox kullandık, ancak öğelerin içeriği tek bir satıra sığmayacak kadar büyük olduğunda ne olur?
Bunu demo etmek için odalarımın boyutunu artıracağım:
Flexbox Layout KitchenWashroomLoungeBedroomBedroomİşte şimdi nasıl görünüyor
Tarayıcı pencerenizi küçültürseniz, içeriğin yer kalmayacağını göreceksiniz. Neredeyse esnek bir kutu, üç olası değere sahip olan bu olasılık için esnek sargı özelliğini tanımlar: no-wrap (varsayılan), sarma ve sarma tersi.
Sarma , bir metin sarma çizgisi gibi, sonraki bir satıra sarmak için kabın ötesine uzayan herhangi bir öğeye neden olur.
.house {background:#FF5651;display:flex;justify-content:space-around;align-items:baseline;flex-wrap:wrap;}Tarayıcınızı aşağı doğru sararsanız görürsünüz bu demoda öğeler artık yeni hatlara sarılıyor. Hizalama öğelerinin: temel özellik nasıl uygulanacağına dikkat edin? Flexbox'ın gerçek gücü özelliklerini birleştiriyor.
Daha sonra ele alacağım önemli bir kavram, esnek-sarma: sarma tersinin eşyaların sırasını tersine çevirmemesi, görüldüğü gibi, konteynerin ötesine uzayacak herhangi bir ögenin, bir önceki satıra sarılmasıdır. bu demoda .
Birçok CSS özelliği gibi, bazı flexbox özellikleri de tarayıcı üreticileri tarafından daha tutarlı bir şekilde uygulanan kısa versiyonlara sahiptir.
Esnek akış özelliği, esnek yön ve esnek sarma özellikleri için kısadır. Yani yazmak yerine:
flex-direction:row-reverse;flex-wrap:wrap;Shorthand'i kullanabiliriz:
flex-flow:row-reverse wrap;Yukarıda, öğeleri satır taban çizgisi, konum ve streç öğelere hizalamak için align-items özelliğini kullandık. Son örnekte de gördüğünüz gibi, bu hala devam ediyor, ancak satır bazında gerçekleşiyor.
Ürünlerimiz paketlendiğinde, eğer konteyner gerekli olduğundan daha büyükse, ikincil eksende nasıl yerleştirileceğini belirleme seçeneğine sahibiz.
Evimizin minimum yüksekliğini 1200px'e ayarlıyorsak, düzenimiz buna benzer .
.house {background:#FF5651;min-height:1200px;display:flex;justify-content:space-around;flex-wrap:wrap;}Öğeleri tam ikincil eksen boyunca düzenlemek için artık align-content özelliğini kullanabiliriz.
Hizalama içeriği özelliğinin altı ayarı vardır: orta, esnek uç, esnek başlangıç, boşluk etrafında, boşluk- uzatma ve streç. Bu değerler başka yerlerde olduğu gibi aynı sonuçları verir: merkezleme, bir uca hizalama, eşit aralıklı veya gerdirme.
İşte bir demo özelliği ile alan etrafında ayarlanmış .
Şimdiye kadar baktığımız tüm özellikler konteynır elemanında belirlendi. Öğeleri flexbox'a ince ayar yapmak için bize ayrıca tek tek öğeler üzerinde ayarlanabilecek bir dizi özellik sağlar.
Bunu açıklığa kavuşturmak için, bazı kodlarımızı kaldıralım:
Flexbox Layout KitchenWashroomLoungeMaster BedroomBedroomİşte nasıl görünüyor.
İlk flexbox öğesi özelliği, kafa karıştırıcı olarak adlandırılan esnek özelliktir. flex , kapsayıcıdaki görüntüleme özelliğinin bir değeridir, ancak aynı zamanda kendi başına bir özelliktir.
Esnek özellik, esnek büyüme, esnek-küçültme ve esnek temel özellikleri için kısadır. Bu özelliklerin rolü, içeriğin boyutunu tam olarak doldurması için içeriğin boyutunu genişletmek veya ezmektir.
Esnek büyüme özelliği, eğer gerekliyse, büyütülecek öğeleri söyler, böylece öğeler genişliği ( esnek yön: satır için ) ve yüksekliği ( esnek yön: sütun için ) tam olarak doldurur.
Esnek büyüme özelliği bir oran alır. Eğer esnek büyüme özelliğini 1 olarak belirlersek, tüm ürünlerimiz aynı boyutta olacak. burada görebilirsiniz .
.room {background:#00AAF2;height:90px;flex-grow:1;}Eşit bir boyuta sahip olmanın yanı sıra farklı oranlar da belirleyebiliriz. Hala mutfağımın tuvaletimden daha büyük olmasını istiyorum, hadi bunu düzeltelim bu demoda .
.kitchen {height:300px;flex-grow:2;}flex-shrink , flex-grow ile aynı şekilde çalışır, ancak genişletmek yerine, eğer gerekliyse kalemi küçültür.
Tarayıcıyı yeniden boyutlandırırsanız, farklı boyutlarda mutfakların diğer odaların genişliğini tam olarak ikiye katlamadığını görürsünüz. Bu flex-temel özelliği nedeniyle.
esnek-temel , esnek büyüme ve bükülme-küçülme özelliklerinin nasıl hesaplandığını belirler. 2 değeri vardır: otomatik (varsayılan) ve 0.
0 olarak ayarlanırsa, öğenin tamamı dikkate alınır. Otomatik olarak ayarlanırsa, öğenin yeniden boyutlandırılan içeriğinin etrafında dolgu yapılır. Başka bir deyişle, 0 hesaplanırken öğenin içeriğinin boyutunu yoksayar ve otomatik olarak dikkate alır. Orada bir kullanışlı diyagram Bunu açıklayan W3C tarafından sağlanmıştır.
İşte bir demo flex temelini ayarladığımda : 0 yukarıdaki örnekte.
flex-base: 0 , içeriklerinden bağımsız olarak öğeleri eşit bir şekilde dağıtmak istiyorsanız özellikle kullanışlıdır.
Yukarıda belirtildiği gibi, bu özellik için esnek özellik kısadır ve bu değerleri belirlemenin en güvenilir yolunu bulacaksınız.
Değerlerin sırası esnek büyüme, esnek-küçültme, esnek temeldir. Yani, 2'lik bir büyüme değeri, 1'lik bir küçültme değeri ve 0'ın temelini ayarlamak için şunları kullanırsınız:
.room {background:#00AAF2;height:90px;flex: 2 1 0;}Flexbox'ın en iyi özelliklerinden biri, işaretlemeyi etkilemeden, öğelerin sırasını değiştirme yeteneğidir; Bu, özellikle işaretlemeyi uygun şekilde kodlamamıza ve en uygun şekilde göstermemize izin verdiği için erişilebilirlik için özellikle kullanışlıdır.
Bunu yapmak için öğenin sipariş özelliğini kullanıyoruz.
Örneğimize baktığımızda, tuvalet odanın hemen yanında. Yatak odalarının yanında olmayı tercih ederim, bu yüzden bir sabah duşa girebilirim, o yüzden taşıyalım. Şu anda 2. madde, üçüncü olmasını istiyoruz. Bu yüzden sipariş özelliğini buna göre belirledik bu demoda .
.washroom {height:60px;order:2;}Sıranın sonuna kadar nasıl delinmiş görüyor musun? Yatak odalarının yanında, ama nasıl tasarlandığımız değil. Bu, esnek bir kutuda büyük bir kazanımdır, çünkü birçok geliştirici (kendimi dahil) başlangıçta siparişin bir dizi gibi çalışmasını bekler.
sipariş aslında CSS ' z-endeksi gibi çalışır , yani bir öğeye ilişkin bir siparişi açıkça belirlemezseniz, bir değerin açıkça ayarlandığı bir öğeden daha düşük olduğu varsayılır.
Tuvalet odasının salonda takılmasını istiyoruz. bu demoda Bir siparişe ihtiyaç duyan diğer ürünler ise yatak odasıdır.
.washroom {height:60px;order:2;}.bedroom {order:3;}Her iki yatak odasının da aynı sipariş numarasını nasıl paylaştığına dikkat edin? Bu gibi durumlarda, tarayıcı DOM sırasına geri dönecektir.
Son madde özelliği align-self'dir. Maddenin ikincil eksen üzerindeki hizalamasını değiştirmek için kullanılır. Tüm öğeleri hizalamak için align-items kullanılır ve bu özellik size bu battaniye ayarını devre dışı bırakma seçeneği sunar.
Kabın üzerindeki eşdeğer özellik ile aynı beş değeri alır: taban çizgisi, merkez, esnek uç, esnek başlangıç ve esneme.
İşte bir demo tuvaletin yeniden hizalanmış.
.washroom {height:60px;order:2;align-self:flex-end;}Flexbox, içerik düzenleme için güçlü bir seçenektir. Tüm sayfaları ortaya koymak için tasarlanmamış olsa da, Grid Düzeni'ne olan üstün desteği, özellikle mobil ilk web siteleri için mükemmel bir seçenek haline getiriyor.
Göstermek için, yukarıda açıklanan tekniklerin bazılarını kullanan basit bir sayfa oluşturacağız.
İlk önce bizim için işaretleme ve sayfa için bazı temel stiller.
Flexbox Demo - A
- B
- C
- D
- E
- F
- G
Gibi görebilirsin , İd sayfası ile bir div var . İç sayfalarda sıralanmamış bir haber listesi var. Haber içeriğinin ardından, haber içeriğinin erişilebilirlik avantajının altında olduğu başlık var. Son olarak, bir altbilgiye sahibim .
Yapmak istediğim ilk şey, başlığı sayfanın en üstüne taşımaktır. Bunu yapmak için sayfayı bir esnek kutu olarak ayarlayacağız. Sonra yönünü sütuna ayarlayacağız . Ardından, her bir sayfanın alt öğelerine bir sipariş verin.
#page {display:flex;}#page {display:flex;flex-flow:column;}#header {order:1;}#news {order:2;}#footer {order:3;}Bir sonraki adım, başlığı düzenlemek. Flexbox konteynerlerin içindeki çocuk elemanları, kendi başlarına esnek kutu kapları olabilir, bu yüzden başlık öğelerini eşit bir şekilde ayırmak için flexbox'ı kullanabiliriz.
Başlığı bir flexbox konteynırı olarak ayarlayalım, daha sonra, kenarlarda fazladan bir dolgu olmadan, içeriği eşit aralıkta bırakalım ve son olarak menü öğelerinin logoyla aynı temel çizgide olmasını sağlayalım.
#header {order:1;display:flex;justify-content:space-between;align-items:baseline;}Haber materyallerimiz öne çıkan hikayeler için yer tutucuları olacak, bu yüzden metin, resim veya video için yer açmak için önemli bir boyutta olmaları gerekiyor. Öyleyse sarmak için onlara ihtiyacımız var.
Haber divunu bir flexbox konteyneri olarak ayarlayalım. Ardından, haberleri biraz asgari boyutlara ve bazı renklere verelim, böylece onları açıkça görebilelim.
#news {order:2;display:flex;}.newsItem {min-width:300px;min-height:250px;background:#79797B;border:1px solid #706667;}Şimdi haber kabını sarmak için ayarlamamız gerekecek ve haber alanı mevcut alanı doldurmak için genişletilecek.
#news {order:2;display:flex;flex-flow:row wrap;}Şu anda sahip olduğumuz zorluk, newsItem'in eşit olarak dağılmadığı zaman en büyük öğenin (G) en altta olmasıdır. Çoğu sitede, en üstteki içeriğe en geniş alan miktarını vermek istiyoruz. Sargıyı ters çevirecek şekilde ayarlayarak bunu düzeltebiliriz .
#news {order:2;display:flex;flex-flow:row wrap-reverse;}Bu öğeleri yeniden sipariş ediyor, ancak sol üstte okuyorlar, artık sıra dışı. Bu yüzden sırayı tersine çevirerek sırayı tersine çevirmemiz gerekiyor.
#news {order:2;display:flex;flex-flow:row-reverse wrap-reverse;}Bu, öğeleri ardışık sıraya yerleştirir, soldan sağa doğru okuma, yukarıdan aşağıya doğru; her zaman en üstte daha büyük öğelerle. Ancak, A maddesini B maddesinden önce gelmeye zorlamak için işaretleme sırasındaki öykülerin sırasını değiştirmek zorunda kalmak istemiyorum. Yapmam gereken en son şey, öğelerin sırasını değiştirmek.
.newsItem:nth-of-type(7) {order:1;}.newsItem:nth-of-type(6) {order:2;}.newsItem:nth-of-type(5) {order:3;}.newsItem:nth-of-type(4) {order:4;}.newsItem:nth-of-type(3) {order:5;}.newsItem:nth-of-type(2) {order:6;}.newsItem:nth-of-type(1) {order:7;}Tarzlaştırılacak son eleman altbilgidir. Üstbilgiye çok benzemek istiyoruz , ama altbilgide sadece üç alt öğe var ( başlığın dördüne kıyasla), paragrafı logonun iki katı kadar geniş olacak şekilde ayarlayacağız. .
#footer {order:3;display:flex;align-items:baseline;flex-direction:row;}#footer > * {flex:1;}#footer > p {flex:2;padding-right:2em;}Masaüstü boyutlarında mükemmel çalışır, ancak tarayıcınızı küçültür ve küçük cihazlarda çok sıkışık olduğunu görürsünüz. Bu yüzden kodu değiştirelim, böylece 600 pikselin altındaki sütunlar olarak yerleştirilir ve 600 pikselin üzerindeki bir satıra döner.
#footer {order:3;display:flex;align-items:baseline;flex-direction:column;padding:2em 0;}#footer > * {flex:1;}#footer > p {flex:2;}@media only screen and (min-width:600px) {#footer {flex-direction:row;padding:0;}#footer > p {margin-right:2em;}}İşte buyur. Bir web sayfasında içerik oluşturma, yaygın olarak desteklenen ve uygulanması kolay modern bir yaklaşım.
Esnek kutunun gücü, mümkün olan en basit sözdizimiyle, mizanpajlarımız üzerinde kesin kontrol sağlamak için özelliklerinin birleştirilebilmesidir.