آموزش فلکس باکس
فلکس باکس چیست؟
فلکس باکس چیست؟(flexbox) مخفف کلمه flexible Box Module در سال 2009 به عنوان یک سیستم جدید با هدف کمک به ما در ایجاد صفحات وب و سازماندهی آسان عناصر خود معرفی شد و از آن زمان،توجهات به آن جلب شد.و به نظر می رسد که اکنون به عنوان سیستم اصلی صفحه آرایی برای صفحات وب استفاده می شود.
فلکس باکس چیست؟
flexbox یک سیستم صفحه آرایی یک بعدی است که میتوانیم از آن برای درست کردن ردیف یا ستون استفاده کنیم.فلکس باکس کار ما را برای طراحی وب و درست کردن صفحات رسپانسیو آسان کرده بدون نیاز به استفاده کردن از ویژگی هایی مانند float وposition که در css وجود دارد.
وقتی فلکس باکس را یک بعدی توصیف می کنیم،این واقعیت را توصیف می کنیم که فلکس باکس همزمان با طرح در یک بعد سروکار دارد به صورت ردیف یا ستون.این را می توان با مدل دو بعدی CSS Grid Layout که ستون ها و ردیف ها را با هم کنترل می کند،در تضاد قرار داد.
برای شروع استفاده از flexbox،تمام آنچه شما باید انجام دهید این است که یک ظرف فلکس با استفاده از ویژگی display: flex ایجاد کنید. بعد از آن،هر عنصری که درون آن ظرف فلکس دارید،به یک عنصر فلکس تبدیل می شود.
Justify-content
Justify-content تراز بندی را در امتداد محور اصلی تعریف می کند.با استفاده از آن میتوانید موارد فلکس را در خط راست تنظیم کنید.این عنوان شش مقدار میگرد:
flex-start (پیش فرض): موارد در ابتدای flex-direction بسته بندی می شوند.
flex-end: موارد در انتهای flex-direction بسته بندی می شوند.
Center: موارد را در مرکز بسته بندی میکند.
space-between: موارد به طور مساوی در خط توزیع می شوند.اولین مورد در خط شروع،آخرین مورد در خط پایان است.و چسبیده به دیواره ها است.
space-around: موارد به طور مساوی در خط با فضای برابر در اطراف توزیع می شوند.و فضای بین موارد مساوی است ولی فاصله موارد اول و آخر با دیواره ها نصف است.
space-evenly: موارد به گونه ای توزیع می شوند که فاصله بین هر دو مورد (و فضای لبه ها) برابر باشد.
}container.
;justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
{
برای انجام دادن این مثال ها به سایت flexboxfroggy.com مراجعه نمایید
مثال ها برای یادگیری بهتر:
نحوه های حل مثال:
Flex-direction
محور اصلی با flex-direction تعریف می شود که دارای چهار مقدار است:
- row
- row-reverse
- column
- column-reverse
}container.
;flex-direction: row | row-reverse | column | column-reverse
{
row (پیش فرض): چپ به راست در ltr؛ در RTL راست به چپ
row-reverse: راست به چپ در ltr؛ در RTL از چپ به راست
column: همان ردیف است اما از بالا به پایین
column-reverse: همان row-reverse اما از پایین به بالا
مثال برای یادگیری بهتر:
نحوه حل مثال:
مثال های ترکیبی:
Flex-wrap
به طور پیش فرض،موارد flex همه سعی می کنند در یک خط قرار بگیرند.می توانید آن را تغییر دهید و اجازه دهید موارد در صورت لزوم با این ویژگی بسته بندی شوند.
.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}
nowrap (پیش فرض): همه موارد فلکس در یک خط قرار می گیرند
wrap: موارد فلکس از بالا به پایین روی چندین خط قرار می گیرند.
wrap-reverse: موارد flex از پایین به بالا روی چندین خط قرار می گیرند.
مثال برای یادگیری بهتر:
نحوه حل مثال:
مثال های ترکیبی:
Align-items
با استفاده از ویژگی align-items ما میتوانیم موقعیت قرارگیری موارد فلکس را که در ظرف فلکس هستند را تنظیم کنیم که پنج مقدار میگیرد:
Stretch (پیش فرض): در این حالت موارد به اندازه ای کشیده می شوند که هم ار تفاع با ظرف خود شوند.
Flex-start: این ویژگی موارد را به صورت عمود در ابتدای ظرف فلکس در می آورد.
Flex-end: این ویژگی شبیه flex-start موارد را عمود میکند ولی با این تفاوت که این کار را در انتهای ظرف فلکس انجام میدهد.
Baseline: این ویژگی به جای ترازبندی باکس ها درون ظرف آنها را طبق محتوای درونشان ترازبندی میکند.
Center: این ویژگی موارد را در وسط ظرف فلکس قرار می دهد.
.container {
align-items : stretch | flex-start | flex-end | center | baseline;
{
مثال برای یادگیری بهتر:
نحوه حل مثال:
مثال های ترکیبی:
نکته مثال ترکیبی 6: توجه داشته باشید که وقتی ;flex-direction :column است ، justify-content را به حالت عمودی و align-items را افقی تراز کنید.تو مقاله آموزش فلکس باکس پیشرفته ما به طور عمیق تری به مبحث فلکس باکس میپردازیم.
برای یادگیری فلکس باکس پیشرفته بر روی لینک کلیک کنید
