Flexbox nedir? Tüm CSS güçlerinin tanımı, temel ilkeleri, avantajları ve dezavantajları. Bir bakışta düzen CSS Flexbox CSS Flexbox'ın temelleri

Flexbox, "Kutsal Kase" düzeni olarak adlandırılan ve birbirine nasıl uyduklarına bakılmaksızın tüm sütunların aynı yüksekliği alması gereken üç sütunlu, yaygın olarak kullanılan web sitesi düzenleri oluşturmak için idealdir. O gelince çıkış kodu ana sayfa navigasyondan önce gelir ve tam sayfada ana sayfa navigasyondan sonra gider.

Nachebto tsyogo.

Esnek kutuların ortaya çıkmasından önce, böyle bir düzen herhangi bir hack veya wiki olmadan kolayca elde edilebiliyordu. Geliştiriciler, ekranın boyutu ne olursa olsun her şeyin doğru şekilde çalışmasını sağlamak için genellikle ek işaretler eklemek, negatif kenar boşlukları eklemek ve diğer hileleri denemek zorunda kaldı. İşaretleme yönteminin gösterdiği gibi Flexbox'ta her şey çok daha basit.

Eksen kısa viklad kodu. Bu uygulamada #main öğesini esnek kap olarak kullanıyoruz ve üstbilgi ve altbilgiyi blok öğelerle dolduruyoruz. Yani sadece orta kısım flexbox haline geliyor. Eksen, esnek bir kapla kullanılabilecek bir parçadır.

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

Esnek bir kap oluşturmak için sadece display: flex'i kullanın. Değeri döndürmek için ayrıca calc () ek işlevi için minimum yükseklik değerini ayarladık ve #main'i görünüm alanının yüksekliğinin %100'ü olarak ayarladık. eksi kapağın ve tabanın yüksekliği (her biri 20vh). Bu, yeterli alan olmadığından düzenin ekranın tüm yüksekliğini kaplamasını garanti eder. Sonuç olarak, bodrum kat hiç yükselmeyecek ve altındaki boş alanı kaplamayacak, bunun yerine daha az ekran yüksekliği kaplayacak.

Min-yükseklik hesaplamasının tamamlanması gerekiyordu, bizi affedin doktorlar, bu yüzden tüm öğelere box-sizing: border-box ayarını yaptık. Eğer hiçbir şey toplamamış olsaydık, dönüşüm için dolgu değerini toplama toplamamız gerekecekti.

Flex konteyneri taktıktan sonra flex elemanların sağına yerleştiriyoruz.

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

Power flex, power flex-growth, flex-shrink ve flex-base kelimelerinin kısaltmasıdır. İlk adımda yalnızca bir değer yazdık, bu nedenle flex, flex-grow'un gücünü yükler. Başka bir örnekte, üç değeri de yazdık.