درک مفاهیم پایه CSS Flexbox

شنبه ۲۳ تیر ۹۷ توسط محمدسینا مرادی

مدل CSS flexbox با نام flexbox نیز شناخته شده است و بیشتر با این نام صدا زده می شود که روشی یک بعدی و بسیار بسیار آسان برای توزیع فضا ، تنظیم و ترازبندی آیتم ها در container می باشد. بعد از مدتی طولانی و خسته شدن فراوان (البته برای من!) در شناوری و پاک سازی "both" در کد ام من به اینکه flexbox می تواند به یک کمک کامل تبدیل گردد پی بردم.

با فلکس باکس container توانایی پیدا می کند که آیتم های خود ، عرض و ارتفاع و ترتیب بندی را تغییر دهد و همچنین می تواند مشخص کند که یک آیتم مشخص می تواند چه مقدار فضا را در container بگیرد. به نظرم کاملا شسته و رفته می باشد نظر شما هم همین است؟ من خیلی در این باره فکر کردم!

قبل از اینکه به عمق برویم می خواهم با اولین چیزی که در flexbox بسیار مهم و کاربردی است آشنایتان کنم.

در flexbox دو محور وجود دارند که یکی از آنها محور اصلی (main axis) و دیگری محور رو به رو (cross axis) نام دارد.

در تصویر زیر می توانید دو محور موجود را ببینید:

محور اصلی

محور اصلی با direction مشخص شده است. شروع و پایان این محور به ترتیب با نام های main-start و main-end شناخته می شوند. ویژگی flex-direction می تواند مشخص کند direction در چه شروع و پایانی (main-axis) تنظیم شود.

در مروگر هایی که انگلیسی زبان پیش فرض آنها می باشد آیتم ها از چپ به راست در container تنظیم می شوند. بطور مثال اگر عربی یا فارسی زبان پیش فرض مرورگر من باشد محور اصلی من از راست به چپ اجرا می شود.

مقدار row-reverse آیتم ها را در flex container به ترتیب وارونه یا معکوس تنظیم می کند.

همانطور که در تصویر بالا می بینید با دادن مقدار row-reverse به flex direction آیتم ها به صورت معکوس نمایش داده شده اند.

محور رو به رو

محور رو به رو ، بر روی محور اصلی عمود اجرا می شود برای مثال اگر محور اصلی شما با flex-direction: column تنظیم شده باشد محور رو به رو همراه با ردیف ها (rows) اجرا می شود و همینطور برعکس آن نیز صدق می کند.

فهمیدن مفهوم محور ها زمانی که شما نیاز دارید آیتم های خود را به ترتیب در container بچینید بسیار مفید و کارآمد واقع می شود.

خب ما خوشحال هستیم که این مبحث را به آخر راه رساندیم در ادامه مقاله به آموزش flex(parent) container و آیتم ها خواهیم رفت.

من پی بردم زمانی که flexbox را در ویژگی هایی که می توانند در container و آیتم ها استفاده شوند تشریح کنیم فهمیدن و یادگرفتن آن آسان تر می شود. در حال حاضر ، ما فقط به سراغ ویژگی های container والد خواهیم رفت.

خب بیایید شروع کنیم!

flex container

برای شروع استفاده از flexbox ، شما در ابتدا نیاز دارید یک flex container را تعریف کنید. این یک المنت والد است که کودکانش را در خود نگه می دارد. آن می تواند یک Div یا Span یا Nav و یا ... باشد.

همانند تصویر زیر:

تصویر زیر خروجی کد شما را قبل از تنظیم کردن flex بر روی ویژگی display نشان می دهد.

container والد با تنظیم کردن ویژگی display برای flex بسیار نرم تر می شود.

و واویلا!! این چیزی است که شما بعد از تنظیم flex مشاهده می کنید.

من همچنین پی بردم که شما می توانید container والد را در display:inline-flex; تنظیم کنید. این کار باعث می شود که flex container خطی (inline) شود که جایگزینی برای بلوک می باشد.پس به نظر می رسد شما خیلی خوش شانس باشید! {-:

ویژگی flex-direction

شما آزاد هستید که تصمیم بگیرید می خواهید چگونه آیتم های تان در flex container نمایش داده شوند. این کار می تواند با flex-direction انجام پذیرد.

این کار باعث می شود که المنت ها در بالای یک دیگر قرار گیرند. فراموش نکنید شما می توانید یک بار مقداری را برای ستون تنظیم کنید و محور اصلی و روبه رو را سوئیچ کنید.

مقادیر دیگر شامل row ، row-reverse ، column و  column-reverse می شود.

ویژگی Justify-content و Align-items

توزیع آیتم ها در flex container با محور اصلی و رو به رو با ویژگی های justify-content و align-items پایان می بابند. در حال فکر کردن به این هستید که آیتم های خود را به بالا ، پایین ، چپ یا راست یا وسط در flex container تان ببرید؟ اینجا است که این دو قهرمان دستان شما را می گیرند.

ویژگی Justify-content

Justify-content آیتم ها را با محور اصلی و رو به رو در container توزیع می کند.

در Justify-content مقادیر مختلفی وجود دارند که ما می توانیم همراه با ویژگی justify-content مان از آنها استفاده کنیم و همچنین در ادامه تک تک آنها را با یک دیگر بررسی خواهیم کرد.

flex-start : مقدار پیش فرض می باشد. آیتم ها را از نقطه شروع flex تنظیم می کند.

می توانید کاربرد را در تصویر زیر ببینید:

flex-end : آیتم ها را از نقطه پایان در flex تنظیم می کند.

می توانید کاربرد را در تصویر زیر ببینید:

center : آیتم ها را در وسط container مرتب می کند.

می توانید کاربرد را در تصویر زیر ببینید:

space-between : آیتم ها دارای یک فاصله برابر میان یک دیگر هستند اما این برای آنها و container صدق نمی کند. به عبارت دیگر اولین و آخرین آیتم هیچ فاصله ای بین خود و container ندارد.

می توانید کاربرد را در تصویر زیر ببینید:

space-around : آیتم ها دارای یک مقدار فاصله ای برابر میان آنها است اما مورد متفاوت با مقدار بالا در این است که اولین و آخرین آیتم ددر این مقدار دارای کمی فاصله میان خود و container شان است. این فاصله نیمی از مقدار میان آن دو آیتم می باشد. برای مثال ما 40 پیکسل مارجین را به span یک و دو داده ایم پس با این موضوع مارجین بین span یک و container معادل 20 پیکسل می گردد.

می توانید کاربرد را در تصویر زیر ببینید:

space-evenly : آیتم ها به طور برابر در container توضیع می شوند.

می توانید کاربرد را در تصویر زیر ببینید:

ویژگی Align-items

با استفاده از Align items می توانید آیتم های خود را در flex container با محور رو به رو مرتب و توضیع کنید. این ویژگی نیز دارای مقادیر مختلفی است که شما قادر به استفاده از آنها هستید.

stretch : مقدار پیش فرض است. آیتم ها فضا را به صورت کامل در محور رو به رو می گیرند.

می توانید کاربرد را در تصویر زیر ببینید:

flex-start : آیتم ها از شروع flex در محور رو به رو تنظیم می شوند.

می توانید کاربرد را در تصویر زیر ببینید:

flex-end : آیتم ها از پایان flex container تنظیم می شوند.

می توانید کاربرد را در تصویر زیر ببینید:

center : آیتم ها از وسط container با محور رو به رو تنظیم می شوند.

baseline : آیتم ها به گونه ای مرتب می شوند که baseline ها برابر باشند.

می توانید کاربرد را در تصویر زیر ببینید:

ویژگی Align-content

زمانی که از align-items و align-content استفاده می کردم فکر می کردم که کاربرد مشابه دارند اما این طور نیست. align-content همانند justify-content کار می کند ولی در این مورد این ویژگی فاصله ای که بین آیتم ها در محور رو به رو است را تعریف می کند. مقادیر آن نیز space-around, space-between, center, stretch, start می باشند.

تصویر زیر زمانی را نشان می دهد که align-content بر روی center تنظیم شده باشد.

من دوست دارم که فکر کنم align-content رفتار ویژگی flex-wrap را نیز تغییر می دهد هر چند در آینده به این موضوع نیز می پردازیم.

توجه: برای اینکه افکتی داشته باشید باید چند خط آیتم را برای این ویژگی داشته باشید.

ویژگی Flex-wrap

بعضی از اوقات شما دوست ندارید آیتم های تان در یک خط تناسب داشته باشند. این به این معنی است اگر شما دارای یک تنظیم از آیتم هایی از flex که عریض container خودشان باشند را دارید پس آنها سر ریز خواهند کرد. حالا شاید شما بخواهید آنها را در چندین خط گسترش دهید که در این زمان flex-wrap وارد می شود.

ویژگی flex-wrap اجازه می دهد آیتم ها بیش از یک خط را در container اشغال کنند. مقدار پیش فرضی که برای flex-wrap وجود دارد nowrap می باشد. برای wrap کردن آیتم ها از مقدار wrap استفاده کنید.

به تصویر زیر توجه کنید:

کد بالا نتیجه زیر را در بر دارد:

شما همچنین می توانید flex-wrap را با flex-direction برای آیتم های خودتان ترکیب کنید که حاصل آن نیز flex-flow می شود. شما می توانید هر مقداری که برای flex-direction استفاده می کردید برای flex-flow هم استفاده نمایید.

نتیجه

flexbox بسیار قدرتمند است و ما کمی صورت آن را درک کردیم که چگونه کار می کند شما توانستید ببینید که چقدر برای مرتب کردن و توزیع چیز ها آسان بود.

اگر شما می خواهید هنگام آموزش وقت های خوبی را داشته باشید یک تن بازی هستند که می توانید آن ها را به صورت آنلاین پیدا کنید. Flexbox Froggy و Flexbox Zombies بازی های مورد علاقه من هستند.

اگر از خواندن این مقاله لذت بردید لطفا نظرات خود را در باره آن از طریق بخش دیدگاه ها برای ما ارسال کنید یا همچنین می توانید آن را لایک کنید.


کلیدواژه: CSS Flexbox مفهوم آموزش ویژگی

منابع: codeburst.io

ارسال دیدگاه:
برای ارسال دیگاه باید به سیستم وارد شوید و یا ثبت نام کنید. ثبت نام چند لحظه بیشتر زمان شما را نمیگیرد.