راهنمای کامل آموزش Flexbox در CSS
همان‌طور که قبلا در نقشه راه برنامه نویسی فرانت اند توضیح داده شد، یکی از مفاهیم مهم در CSS یادگیری و آموزش Flexbox است که در ایجاد چیدمان یا layout صفحات وب، کمک فراوانی به ما می‌کند.
ایده اصلی flexbox یا همان فلکس در زبان CSS این بود که به container خود این امکان را بدهد که عرض، ارتفاع و ترتیب آیتم‌های خود را تغییر دهد تا فضای موجود را به بهترین شکل پُر کند. این کار برای نمایش درست المنت‌های HTML در یک صفحه وب‌سایت خصوصاً در حالت‌های واکنشگرا یا ریسپانسیو انجام می‌شود.
مبانی و اصطلاحات
به این تصویر کلی از ساختار یک عنصر flexbox دقت کنید:
ما یک container یا ظرف با نمایش flex داریم و دو آیتم به عنوان فرزند این المنت.
- محور اصلی (main axis): محور اصلی ظرف فلکس، محور اولیه‌ای است که آیتم‌های فلکس در امتداد آن قرار می‌گیرند که لزوماً افقی نیست و بستگی به ویژگی flex-direction دارد.
- main-start و main-end: آیتم‌های فلکس در ظرف خود بین این دو جای می‌گیرند (در راستای محور اصلی).
- اندازه اصلی (main size): بسته به این که ظرف ما در امتداد افقی باشد یا عمودی، این مقدار عرض یا ارتفاع عنصر والد را مشخص می‌کند.
- محور متقاطع (cross axis): محوری که عمود بر محور اصلی فلکس ما باشد. بسته به محور اصلی می‌تواند عمودی یا افقی قرار بگیرد.
- cross-start و cross-end: آیتم‌های فلکس در ظرف خود بین این دو جای می‌گیرند (در راستای محور متقاطع).
- اندازه متقاطع (cross size): بسته به این که ظرف ما در امتداد افقی باشد یا عمودی، این مقدار ارتفاع یا عرض عنصر والد را مشخص می‌کند.
برای یادگیری جامع این مبحث، می‌توانید دوره آموزشی کپسول Flex و Grid را تهیه کنید.
ویژگی‌های فلکس‌باکس (Flexbox)
ویژگی‌های ظرف یا container (المنت والد)
ویژگی display
این یک ظرف فلکس را تعریف کرده که محتوای انعطاف‌پذیری را برای همه فرزندان مستقیم خود فراهم می‌کند.
.container {
display: flex; /* or inline-flex */
}
ویژگی flex-direction
مشخص کننده محور اصلی (main-axis) است و جهتی که آیتم‌های فلکس در ظرف خود قرار می‌گیرند را مشخص می‌کند.
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
- row (پیش‌فرض): از چپ به راست در ltr؛ از راست به چپ در rtl
- row-reverse: برعکس row
- column: مانند row اما از بالا به پایین
- column-reverse: مانند column اما از پایین به بالا
ویژگی flex-wrap
به طور پیش‌فرض، آیتم‌های فلکس سعی می‌کنند در یک خط قرار بگیرند. می‌توانید آن را تغییر دهید و اجازه دهید موارد در صورت نیاز با این ویژگی wrap شوند.
.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}
- nowrap (پیش‌فرض): همه آیتم‌ها در یک خط
- wrap: آیتم‌ها در چند خط از بالا به پایین قرار می‌گیرند.
- wrap-reverse: آیتم‌ها در چند خط از پایین به بالا قرار می‌گیرند.
ویژگی flex-flow
برای خلاصه‌نویسی دو ویژگی flex-direction و flex-wrap استفاده می‌شود. مقدار پیش‌فرض آن row nowrap است.
.container {
flex-flow: column wrap;
}
ویژگی justify-content
همان‌طور که در تصویر بالا می‌بینید برای مشخص کردن چیدمان محتوای ما در راستای محور اصلی از این ویژگی که مقادیر مختلفی می‌تواند بگیرد استفاده می‌کنیم. مقدار پیش‌فرض آن هم flex-start است که در دیزاین‌های ltr از سمت چپ و در rtl از سمت راست شروع به چینش می‌کند.
.container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}
ویژگی align-items
برای مشخص کردن نحوه چیدمان در راستای محور متقاطع از این ویژگی استفاده می‌کنیم. به نوعی عملکردی متضاد justify-content دارد. پیش‌فرض آن stretch است و سعی می‌کند تمام ارتفاع (به شرط افقی بودن محور اصلی) را با آیتم‌های فلکس داخل container بپوشاند.
.container {
align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}
ویژگی align-content
همان‌طور که justify-content داخل محور اصلی، آیتم‌ها را می‌چیند، این ویژگی، وقتی فضای اضافی در محور متقاطع (cross-axis) باشد، خطوط را با هم تراز می‌کند. برای این که این مقدار کار کند، باید ویژگی flex-wrap مقدار wrap یا wrap-reverse باشد و آیتم‌ها به چند خط تبدیل شده باشند.
.container {
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}
ویژگی‌های gap و row-gap و column-gap
به صراحت فضای بین آیتم‌های فلکس را کنترل می‌کند. این فاصله فقط بین آیتم‌ها و نه در لبه‌های بیرونی اعمال می‌شود.
.container {
display: flex;
...
gap: 10px;
gap: 10px 20px; /* row-gap column gap */
row-gap: 10px;
column-gap: 20px;
}
ویژگی‌های آیتم‌ها (المنت‌های فرزند)
ویژگی order
به‌طور پیش‌فرض، آیتم‌های فلکس به ترتیب قرار می‌گیرند. با این حال، ویژگی order ترتیب ظاهر شدن آنها در ظرف والد را کنترل می‌کند.
.item {
order: 5; /* default is 0 */
}
ویژگی flex-grow
این توانایی یک آیتم فلکس را برای رشد در صورت لزوم تعریف می کند. یک مقدار بدون واحد را می‌پذیرد که به صورت نسبی عمل می‌کند. می‌گوید چه مقدار از فضای موجود در داخل container باید اشغال شود.
اگر همه آیتم‌های دارای flex-grow برابر 1 باشند، فضای باقی‌مانده در ظرف به طور مساوی بین همه فرزندان تقسیم می‌شود. اگر یکی از آیتم‌ها مقدار 2 داشته باشد، آن آیتم دو برابر بیشتر از فضای دیگران را اشغال می‌کند (یا حداقل برای این اتفاق تلاش خواهد کرد).
.item {
flex-grow: 4; /* default 0 */
}
ویژگی flex-shrink
این ویژگی، توانایی یک آیتم فلکس را برای کوچک شدن در صورت لزوم (اگر نیاز به کوچک شدن باشد) تعریف می‌کند.
.item {
flex-shrink: 3; /* default 1 */
}
ویژگی flex-basis
اندازه پیش‌فرض یک عنصر را قبل از تقسیم کردن فضای باقی مانده تعریف می‌کند که می‌تواند یک طول (به عنوان مثال ٪20، 5rem و غیره) یا یک کلمه کلیدی باشد. کلمه کلیدی auto به معنای «به ویژگی عرض یا ارتفاع من نگاه کنید» است. کلمه کلیدی content به معنای «اندازه آن بر اساس محتوای آیتم» است.
اگر روی 0 تنظیم شود، فضای اضافی اطراف محتوا در نظر گرفته نمی‌شود. اگر روی auto تنظیم شود، فضای اضافی بر اساس مقدار flex-grow تقسیم می‌شود. این تصویر را ببینید.
.item {
flex-basis: | auto; /* default auto */
}
ویژگی flex
این ویژگی مختصرنویسی از flex-grow و flex-shrink و flex-basis است. پارامترهای دوم و سوم (flex-shrink و flex-basis) اختیاری هستند. مقدار پیش‌فرض به صورت زیر است:
.item {
flex: 0 1 auto;
}
اما اگر آن را با یک مقدار واحد تنظیم کنید، مانند flex: 5، این حالت flex-basis را به %0 تغییر می‌دهد، بنابراین مانند کد زیر می‌شود:
.item {
flex-grow: 5;
flex-shrink: 1;
flex-basis: 0%;
}
پیشنهاد می‌شود همیشه به صورت خلاصه‌نویسی کدنویسی شود:
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
ویژگی align-self
اجازه می‌دهد که هم‌ترازی پیش‌فرض (یا آن چیزی که توسط ویژگی align-items مشخص شده است) برای آیتم‌های فلکس تنهایی لغو شود.
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
توجه داشته باشید که float و clear و vertical-align هیچ تاثیری روی یک آیتم فلکس ندارند.
منبع: با افتخار از css-tricks.com
دیدگاهتان را بنویسید