Flexbox، سیستم قالب بندی

بزرگترین چالش یک فرانت کار، چیدمان صفحه منطبق با طراحی اولیه است. اندازه هر المان، فواصل المان ها از یکدیگر و از همه مهم تر Responsive بودن صفحه براساس اینکه در چه محیطی هایی (موبایل، دسکتاپ یا تبلت) مشاهده می شود. ویژگی هایی مثل position، block، inline و float برای همین منظور در css در اختیار برنامه نویس قرار داده شده اند. تا این جای کار به ظاهر مشکلی وجود ندارد. اما وقتی تعداد المان های صفحه زیاد می شود و Responsive بودن برای المان های تودرتو هم جزئی لاینفک از آن می شود، پیاده سازی صفحه صرفا با این ویژگی ها عملا به کاری پیچیده تبدیل خواهد شد.

تاریخچه

تقریبا در اواخر سال 2007، گروه کاری css؛ به عنوان زیرمجموعه کنسرسیوم جهانی وب، ایده مدل فلکس باکس را مطرح کرد. ایده ای که در آن از سیستم ساده چینش اجزا برای چینش طرح های پیچیده در صفحات وب سخن می گفت. اولین پیش نویس این سیستم در اواسط سال 2009 منتشر شد که مشخصات فنی آن بر مبنی فناوری XUL متعلق به فایرفاکس، که آن را برای ایجاد رابط کاربری محصولات خود ابداع کرده بود. در سال 2011 این سیستم چینش توسط Tab Atkins تغییرات عمده ای از نظر سهولت و سرعت کرد و به صورت غیررسمی در مرورگرهای کروم، اوپرا و اکسپلورر 10 پشتیبانی شد. در سال 2012، فلکس باکس به عنوان یک سیستم چینش انعطاف پذیر توسط W3C معرفی شد. آخرین تغییرات در سیستم فلکس باکس به همراه دستورات جدید در سال 2015 اعمال شد.

فلکس باکس

فلکس باکس یک سیستم قالب بندی است که برای چیدمان گروهی آتیم ها در یک بعد (ِDimension) طراحی شده. فرض کنید قرار است مجموعه ای از بلوک ها در کنار هم و در محور افقی قرار گیرند به شکلی که با تغییر سایز صفحه، بتوانند خود را تغییر سایز داده و در مواردی به دو ردیف تبدیل شوند. ایجاد چنین ساختاری در فلکس باکس بسیار ساده تر از خواص قبلی css خواهد بود.

برای فهم بیشتر کد HTML زیر را تعریف می کنیم به شکلی که 4 آیتم در یک آیتم مادر قرار گرفته باشند:

<div class=&quotcontainer&quot>
   <div class=&quotitem&quot>
      <p>Item1</p>
   </div>
   <div class=&quotitem&quot>
      <p>Item2</p>
   </div>
   <div class=&quotitem&quot>
      <p>Item3</p>
   </div>
   <div class=&quotitem&quot>
      <p>Item4</p>
   </div>
</div>

تگ مادر دارای کلاس با نام container و تگ های داخلی دارای کلاس با نام item هستند. به عبارتی المان مادر که سایر المان ها را همچون یک جعبه بزرگ در بر گرفته container نامیده می شود و عناصر داخلی آن نیز child هستند. اگر این کد را در مرورگر اجرا کنیم، تمامی تگ ها به صورت ستونی نمایش داده می شوند. برای اجرای چیدمان بوسیله فلکس باکس، کلاس زیر را تعریف میکنیم:

.container {
  display: flex; 
  flex-direction: row;
}

ویژگی flex باعث میشود تا تگ container به صورت یک flex box عمل کند و عناصر داخل آن را طبق تعریف flex، در یک بعد مرتب نماید. دستور flex-direction نیز جهت چیدمان در سیستم flex box را تعیین می کند که در این حالت به صورت ردیف تعریف شده است.

جهت چینش

اگر بخواهیم چینش به صورت عمودی انجام شود، ویژگی flex-direction باید به column تغییر یابد:

.container {
  display: flex; 
  flex-direction: column;
}

تراز کردن

از آنجایی که سایز container اصلی و یا child های داخل آن می توانند متغییر باشند، تراز کردن آن بسیار حائز اهمیت است. برای مثال ممکن است جمع عرض 5 آیتم داخل container کوچکتر از عرض یک container باشد. در این صورت اینکه چیدمان از ابتدا، انتها با وسط container آغاز شود و حتی اینکه اگر از چیدمان از وسط شروع شده باشد، فاصله بین child ها چقدر باشد، بسیار مهم است. ویژگی justify-content این امکان را فراهم می سازد تا نوع تراز شدن child ها در container را تعیین کنیم. ویژگی زیر را در نظر بگیرید:

.container {
  display: flex; 
  flex-direction: column;
  justify-content: flex-start;
}

ویژگی flex-start باعث می شود، تراز المان ها از سمت چپ به عنوان نقطه آغاز باکس اصلی انجام شود. ویژگی های دیگر justify-content شامل: flex-end، center، space-between، space-around و space-evenly، هستند.

علاوه بر ایجاد تراز در محور افقی، در محور عمودی هم امکان ایجاد تراز وجود دارد. ویژگی align-content باعث می شود، child های درون container در محور عمودی نیز تراز شوند. برای مثال، کد زیر باعث می شود تا item ها در محور عمودی وسط چین شوند:

.container {  
   display: flex; 
    flex-direction: column;
    justify-content: flex-start;
    align-content: center;
}

پارامترهای مربوط به ویژگی align-content نیز شبیه به justify-content هستند.

محورهای Flex Box

در سیستم فلکس باکس، دو محوری وجود دارد که چیدمان حول این دو محور انجام می شود: Main Axis و Cross Axis. محور Main به صورت افقی و محور Cross به صورت عمودی تعریف می شود. این محورها زمان به کار می آیند که بخواهیم Alignment انجام دهیم. برای مثال اگر بخواهیم قسمت مرکز تمامی باکس های داخلی با ارتفاع متفاوت نسبت به محور Cross در یک خط باشند، می بایست از این ویژگی بهره ببریم. بنابراین، به جای محور افقی و عمودی، از Main و Cross استفاده می کنیم. اما چرا؟

اگر ویژگی flex-direction به column تغییر یابد، جای محور Main و Cross عوض می شود. یعنی این بار محورهای افقی و عمودی به ترتیب به Cross و Main تبدیل می شوند.

شکستن به خط بعد

اگر جمع عرض item های یک container بیش از عرض آن container شود و یا اینکه صفحه در حالت Responsive به گونه ای تشکیل شود که item ها در یک سطر جا نشوند، باید به سیستم flex به گونه ای اعلام شود تا ادامه Item ها را در سطر بعدی ادامه دهد. ویژگی flex-wrap تعیین میکند در صورت بیرون زدن Item ها از container، آیا آن را به سطر بعد منتقل کند یا نه:

.container {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
}

این ویژگی دو مقدار wrap ،no-wrap و wrap-reverse می تواند باشد.

ویژگی های Item

برخی از ویژگی ها به جای container برروی child ها اعمال می شوند. انعطاف پذیری Item های داخل یک container با سه ویژگی flex-basis، flex-grow و flex-shrink مشخص می شوند.

• ویژگی flex-basis: این ویژگی اندازه پیش فرض هر Item در فلکس باکس، قبل از اینکه فضای خالی بین item ها بین آنها توزیع شود تعیین می کند که می تواند در مقیاس px یا em باشد. به عبارت دیگر، این ویژگی می تواند به عنوان حداقل عرض یک Item تعیین شود ولی می تواند از آن نیز بزرگتر شود.

.item {
  flex-basis: <length> | auto | content; 
}

• ویژگی flex-grow: این ویژگی برای هر Item به صورت مجزا می تواند تعریف شود که قابلیت رشد آن Item براساس مضربی از فضای خالی container نسبت به سایر Item ها را در نظر می گیرد. برای مثال اگر برای یک Item مضرب 2 در نظر گرفته شود، آن Item در زمان رشد، دو برابر سایر Item ها فضای خالی را به خود اختصاص می دهد.

.item1 { flex-grow: 1; }
.item2 { flex-grow: 1; }
.item3 { flex-grow: 2; }

• ویژگی flex-shrink: این ویژگی تعیین می کند در صورتی که فضای اضافی در container موجود نباشد، آن Item تا چه میزان می تواند کوچک شود. مقدار پیش فرض این ویژگی 1 است. اگر مقدار 0 برای آن در نظر گرفته شود، معانی آن این است که سایز Item هموار همان مقدار اولیه باشد و تغییر نکند.

.container { width: 700px; padding: 20px; }

.item1 { flex-basis: 150px; flex-shrink: 1; } // actual width: 133.5px
.item2 { flex-basis: 250px; flex-shrink: 2; } // actual width: 204px
.item3 { flex-basis: 350px; flex-shrink: 3; } // actual width: 316.5px

ویژگی های تکمیلی

سیستم فلکس باکس علاوه بر ویژگی های اصلی، دارای ویژگی های دیگری هم هست که در کوتاه کردن کد به شما کمک شایانی می کند. به عنوان نمونه، ویژگی flex-flow اجازه می دهد تا ویژگی flow-direction و flex-wrap را به صورت همزمان در یک خط داشته باشید:

.container {    
   display: flex;
   flex-flow: row wrap; 
}

کلام آخر:

سیستم فلکس باکس یکی از قدرتمندترین سیستم های چینش المان ها در وب است که در کنار سایر ویژگی های css امکان طراحی یک صفحه وب را به راحتی برای شما فراهم می سازد. با مطالعه و آزمون و خطای این سیستم می توانید مهارت دو چندان در طراحی صفحات وب خود داشته باشید.