فلکس باکس یک ماژول CSS3 برای چیدمان، ترازبندی و تقسیم فضای بین عناصر موجود درصفحه است.
تا قبل از معرفی فلکس باکس، برای هر کدام از این کارها راهی وجود داشت که خب سختی‌های خود را داشتند و در خیلی از موارد نیازمند استفاده از css tricks بودیم (مثل استفاده از float و روش clearfix برای چیدمان).
اما حالا با خیال راحت و بسیار ساده می‌توانیم از فلکس باکس استفاده کنیم.
اگر قصد مدیریت سه div را دارید، کافیست در css در عنصر پدر یا همان نگه دارنده‌ی آنها، پراپرتی display را برابر با flex قرار دهید و تمام؛ حالا می‌توانید به راحتی کار چیدمان، ترازبندی و تقسیم فضای بین عناصر موجود درصفحه را انجام دهید.
در اینجا قصد آموزش فلکس باکس را ندارم اما برای نشان دادن توانایی‌ها و سادگی فلکس باکس به طور مختصر به سه پراپرتی از فلکس باکس اشاره می‌کنم.
چیدمان:
حالا به کمک فلکس باکس می‌توانید به راحتی عناصر را به صورت تک بعدی کنار هم قرار دهید. منظور از تک بعدی، قرار دادن عناصر در یکی از محورهای x یا y است.
و برای مشخص کردن محور و همینطور جهت قرارگیری عناصر می‌توانید از پراپرتی flex-direction استفاده کنید و مقادیر داخل عکس را به آن بدهید.
ترازبندی:
همینطور برای ترازبندی عناصر از پراپرتی align-items استفاده می‌کنیم.
تقسیم فضای بین عناصر:
تقسیم فضای بین عناصر نیز بسیار ساده است و تنها باید از پراپرتی justify-content استفاده کرد.
اگر علاقمند به یادگیری فلکس باکس هستید می‌توانید از سایت w3schools استفاده کنید و از این به بعد لذت صفحه آرایی با فلکس باکس را بچشید.
همینطور به کمک بازی آنلاین FLEXBOX FROGGY مفاهیم را در ذهن خود تثبیت کنید.
