5.00 / 1 oy

CSS Flexbox Flex-Flow Nedir ve Nasıl Kullanılır?

Flexbox kullanırken flex-flow özelliği aslında yeni bir özellik değildir ancak aynı anda flex-direction ve flex-wrap özelliklerini kullanmamız gerektiği durumlarda (aslında hemen her durumda her ikisini de yazıyoruz) her iki css özelliğini tek seferde yazabilmemizi sağlayan bir özellik.

İlgili yazılar için:

CSS Flexbox Flex-Direction Nedir ve Nasıl Kullanılır?

CSS Flexbox Flex-Wrap Nedir ve Nasıl Kullanılır?

Şimdi aşağıdaki gibi tek satırda 10 alt div'i yan yana sığdırarak dizen container için daha önce yazdığımız flex-direction ve flex-wrap özelliklerini hatırlayalım:

flex-direction: row; 
flex-wrap: nowrap;css flexbox

Şimdi de bu iki satır yerine aynı işlevi görecek şekilde tek bir satır ile aşağıdaki gibi flex-flow özelliğini yazıyorum:

/*flex-direction: row; flex-wrap: nowrap;*/
flex-flow: row nowrap;

Html sayfasında en ufak bir değişiklik olmayacaktır, benzer şekilde flex-direction ve flex-wrap özellikleri örneğin column ve wrap olacak olsaydı da flex-flow özelliğini aşağıdaki gibi yazacaktık:

flex-flow: column wrap;

Yeni bir özellik getirmese de iki satır halinde yazdığımız iki farklı özelliği tek satıra indirgeyerek bünyesinde toplayan bir özellik olması açısından kullanışlı.

BasParmak

27.06.2020 14:36

Bu soru henüz yanıtlanmamış.

Bu soruya sadece kayıtlı kullanıcılar yanıt yazabilirler. Yanıt yazmak için lütfen giriş yapınız.

Reitix
CSS Flexbox Flex-Flow Nedir ve Nasıl Kullanılır?

İnternet sitemizdeki deneyiminizi iyileştirmek için çerezler kullanıyoruz. Bu siteye giriş yaparak çerez kullanımını kabul etmiş sayılıyorsunuz. Daha fazla bilgi.