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;
Ş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ı.