معرفی flex-flow
سلام دوست عزیز! در این مطلب می‌خوایم درباره خاصیت flex-flow در CSS صحبت کنیم. این خاصیت یکی از ویژگی‌های سیستم Flexbox است که به ما اجازه میده نحوه قرارگیری آیتم‌ها رو به خوبی کنترل کنیم. اگر تجربه کار با Flexbox رو داشته باشی، می‌دونی که استفاده از flex-direction و flex-wrap چقدر می‌تونه مهم باشه. خب، حالا فرض کن که این دو خاصیت رو می‌تونی با هم و در یک خط مشخص کنی؛ اینجاست که flex-flow وارد میشه.
خاصیت flex-flow ترکیبی از دو ویژگی مهم flex-direction و flex-wrap هست. به عبارتی، به جای اینکه هر کدوم از این ویژگی‌ها رو به صورت مجزا استفاده کنی، می‌تونی از flex-flow استفاده کنی و در یک خط کاری که باید با دو خط کد انجام می‌دادی رو مدیریت کنی.
استفاده از flex-flow
وقتی داریم از flex-flow استفاده می‌کنیم، انتخاب‌های مختلفی پیش روی ماست. فرض کن که می‌خوای ترتیب آیتم‌های یک کانتینر رو افقی یا عمودی و همچنین نحوه پیچاندن (wrap) اون‌ها رو کنترل کنی. توی این شرایط، استفاده از flex-flow بسیار به کار میاد. این خاصیت به ما امکان این رو میده که ترکیبات مختلفی از flex-direction و flex-wrap رو امتحان کنیم و بهترین راهکار برای طراحی خودمون رو پیدا کنیم.
حالا مثلا اگر بخوایم آیتم‌ها به صورت row (سطر افقی) شده و wrap (پیچیده) بشن، می‌تونیم از این خاصیت به این شکل استفاده کنیم:
.container {
display: flex;
flex-flow: row wrap;
}
کد بالا رو تحلیل کنیم:
.container:این خط داره روی یک کانتینر (container) اعمال میشه که می‌خوایم عناصر داخلش رو با Flexbox مرتب کنیم.
display: flex;:اول از همه، با این خط مشخص می‌کنیم که داره از Flexbox استفاده می‌کنه.
flex-flow: row wrap;:با استفاده از این خط، ترتیب عناصر رو به صورت سطر (row) و پیچیدن (wrap) تعیین می‌کنیم.