Flexbox nedir? Tüm CSS özelliklerinin açıklaması, temel ilkeler, avantajlar ve dezavantajlar. Flexbox ile çalışmak için bazı yararlı örnekler Flex'teki Yararlı bağlantılar

Flexbox'lar, içeriklerine bakılmaksızın tüm sütunların tam yükseklikte olması gereken üç sütunlu, sözde "Kutsal Kase" düzeni gibi yaygın olarak kullanılan web sitesi düzenlerini oluşturmak için idealdir. Aynı zamanda kaynak kodunda ana içerik gezinmeden önce gelir ve sayfanın kendisinde ana içerik gezinmeden sonra gelir.

Bunun gibi.

Flexbox'tan önce bu düzeni bazı hileler kullanmadan elde etmek oldukça zordu. İçerik miktarına veya ekran boyutuna bakılmaksızın her şeyin doğru şekilde sıralanmasını sağlamak için geliştiriciler sıklıkla ekstra işaretleme eklemek, negatif kenar boşlukları uygulamak ve diğer hileler yapmak zorunda kalıyordu. Ancak yukarıdaki örnekte de görüldüğü gibi Flexbox'ta her şey çok daha basit çıkıyor.

İşte kodun bir özeti. Bu örnekte #main öğesini esnek bir kap haline getiriyoruz ve üstbilgi ve altbilgiyi blok öğeleri olarak bırakıyoruz. Yani sadece orta kısım flexbox oluyor. İşte onu esnek bir kap haline getiren bir pasaj.

#main ( ekran: esnek; minimum yükseklik: calc(100vh - 40vh); )

Esnek bir kap oluşturmak için sadece display: flex'i kullanın. Ayrıca calc() işlevini kullanarak minimum yüksekliği ayarladığımızı ve #main'i görünüm yüksekliğinin %100'üne ayarladığımızı unutmayın. eksi başlığın ve tabanın yüksekliği (her biri 20vh). Bu, çok az içerik olsa bile düzenin ekranın tüm yüksekliğini doldurmasını sağlar. Sonuç olarak, içerik ekranın yüksekliğinden daha az yer kaplıyorsa altbilgi hiçbir zaman yükselmez ve altında boş alan bırakmaz.

Tüm öğelere box-sizing: border-box uyguladığımız göz önüne alındığında, minimum yüksekliğin hesaplanması oldukça basitti. Bunu yapmasaydık şunu eklememiz gerekirdi: dolgu değeriçıkarılacak miktara kadar.

Esnek konteyneri kurduktan sonra esnek elemanlarla ilgileniyoruz.

#main > makale ( flex: 1; ) #main > nav, #main > kenara ( flex: 0 0 20vw; arka plan: beige; ) #main > nav ( order: -1; )

Flex özelliği, flex-grow, flex-shrink ve flex-basis özelliklerinin kısaltmasıdır. İlk durumda, yalnızca bir değer yazdık, dolayısıyla flex, flex-grow özelliğini ayarlar. İkinci durumda, üç değeri de yazdık.