Bootstrap

فلکس باکس(Flexbox)چیست؟-بخش مقدماتی

آموزش فلکس باکس

فلکس باکس چیست؟

فلکس باکس چیست؟(flexbox) مخفف  کلمه flexible Box Module در سال 2009 به عنوان یک سیستم جدید با هدف کمک به ما در ایجاد صفحات وب و سازماندهی آسان عناصر خود  معرفی شد و از آن زمان،توجهات به آن جلب شد.و به نظر می رسد که اکنون به عنوان سیستم اصلی صفحه آرایی برای صفحات وب استفاده می شود.

فلکس باکس چیست؟

flexbox یک سیستم صفحه آرایی یک بعدی است که میتوانیم از آن برای درست کردن ردیف یا ستون استفاده کنیم.فلکس باکس کار ما را برای طراحی وب و درست کردن صفحات رسپانسیو آسان کرده بدون نیاز به استفاده کردن از ویژگی هایی مانند float وposition که در css وجود دارد.

وقتی فلکس باکس را یک بعدی توصیف می کنیم،این واقعیت را توصیف می کنیم که فلکس باکس همزمان با طرح در یک بعد سروکار دارد به صورت ردیف یا ستون.این را می توان با مدل دو بعدی CSS Grid Layout که ستون ها و ردیف ها را با هم کنترل می کند،در تضاد قرار داد.

برای شروع استفاده از flexbox،تمام آنچه شما باید انجام دهید این است که یک ظرف فلکس با استفاده از ویژگی display: flex ایجاد کنید. بعد از آن،هر عنصری که درون آن ظرف فلکس دارید،به یک عنصر فلکس تبدیل می شود.

فلکس باکس چیست؟-بخش مقدماتی(1)

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

{

فلکس باکس چیست؟-بخش مقدماتی(2)

برای انجام دادن این مثال ها به سایت flexboxfroggy.com مراجعه نمایید

مثال ها برای یادگیری بهتر:

فلکس باکس چیست؟-بخش مقدماتی(3)

نحوه های حل مثال:

فلکس باکس چیست؟-بخش مقدماتی(4)
فلکس باکس چیست؟-بخش مقدماتی(4)
فلکس باکس چیست؟-بخش مقدماتی(5)
فلکس باکس چیست؟-بخش مقدماتی(6)
فلکس باکس چیست؟-بخش مقدماتی(6)
فلکس باکس چیست؟-بخش مقدماتی(8)
فلکس باکس چیست؟-بخش مقدماتی(7)
فلکس باکس چیست؟-بخش مقدماتی(10)
فلکس باکس چیست؟-بخش مقدماتی(11)
فلکس باکس چیست؟-بخش مقدماتی(71)

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 اما از پایین به بالا

فلکس باکس چیست؟-بخش مقدماتی(12)

مثال برای یادگیری بهتر:

فلکس باکس چیست؟-بخش مقدماتی(13)

نحوه حل مثال:

فلکس باکس چیست؟-بخش مقدماتی(14)
فلکس باکس چیست؟-بخش مقدماتی(15)
فلکس باکس چیست؟-بخش مقدماتی(16)
فلکس باکس چیست؟-بخش مقدماتی(17)
فلکس باکس چیست؟-بخش مقدماتی(18)

مثال های ترکیبی:

فلکس باکس چیست؟-بخش مقدماتی(28)
فلکس باکس چیست؟-بخش مقدماتی(29)
فلکس باکس چیست؟-بخش مقدماتی(30)
فلکس باکس چیست؟-بخش مقدماتی(31)
فلکس باکس چیست؟-بخش مقدماتی(32)
فلکس باکس چیست؟-بخش مقدماتی(33)

Flex-wrap

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

.container {

  flex-wrap: nowrap | wrap | wrap-reverse;

}

nowrap (پیش فرض): همه موارد فلکس در یک خط قرار می گیرند

wrap: موارد فلکس از بالا به پایین روی چندین خط قرار می گیرند.

wrap-reverse: موارد flex از پایین به بالا روی چندین خط قرار می گیرند.

فلکس باکس چیست؟-بخش مقدماتی(20)

مثال برای یادگیری بهتر:

فلکس باکس چیست؟-بخش مقدماتی(21)

نحوه حل مثال:

فلکس باکس چیست؟-بخش مقدماتی(22)
فلکس باکس چیست؟-بخش مقدماتی(23)

مثال های ترکیبی:

فلکس باکس چیست؟-بخش مقدماتی(34)
فلکس باکس چیست؟-بخش مقدماتی(35)
فلکس باکس چیست؟-بخش مقدماتی(36)

Align-items

با استفاده از ویژگی align-items ما میتوانیم موقعیت قرارگیری موارد فلکس را که در ظرف فلکس هستند را تنظیم کنیم که پنج مقدار میگیرد:

Stretch (پیش فرض): در این حالت موارد به اندازه ای کشیده می شوند که هم ار تفاع با ظرف خود شوند.

Flex-start: این ویژگی موارد را به صورت عمود در ابتدای ظرف فلکس در می آورد.

Flex-end: این ویژگی شبیه flex-start موارد را عمود میکند ولی با این تفاوت که این کار را در انتهای ظرف فلکس انجام میدهد.

Baseline: این ویژگی به جای ترازبندی باکس ها درون ظرف آنها را طبق محتوای درونشان ترازبندی میکند.

Center: این ویژگی موارد را در وسط ظرف فلکس قرار می دهد.

.container {

  align-items : stretch | flex-start | flex-end | center | baseline;

{

فلکس باکس چیست؟-بخش مقدماتی(24)

مثال برای یادگیری بهتر:

فلکس باکس چیست؟-بخش مقدماتی(25)

نحوه حل مثال:

فلکس باکس چیست؟-بخش مقدماتی(26)
فلکس باکس چیست؟-بخش مقدماتی(27)

مثال های ترکیبی:

فلکس باکس چیست؟-بخش مقدماتی(37)
فلکس باکس چیست؟-بخش مقدماتی(38)
فلکس باکس چیست؟-بخش مقدماتی(39)
فلکس باکس چیست؟-بخش مقدماتی(40)
فلکس باکس چیست؟-بخش مقدماتی(41)
فلکس باکس چیست؟-بخش مقدماتی(42)
فلکس باکس چیست؟-بخش مقدماتی(43)
فلکس باکس چیست؟-بخش مقدماتی(44)
فلکس باکس چیست؟-بخش مقدماتی(45)

نکته  مثال ترکیبی 6: توجه داشته باشید که وقتی ;flex-direction :column است ، justify-content را به حالت عمودی و align-items  را افقی تراز کنید.تو مقاله آموزش فلکس باکس پیشرفته ما به طور عمیق تری به مبحث فلکس باکس میپردازیم.

برای یادگیری فلکس باکس پیشرفته بر روی لینک کلیک کنید

آرش مرادوند

آرش مرادوند حدود 2 سالی هست که در زمینه برنامه نویسی و تولید محتوا و سئو به صورت تخصصی فعالیت می کند و علاقه زیادی به کسب تجربه در زمینه بازاریابی اینترنتی و تجارت الکترونیک دارد، آرش یک کارآفرین خستگی ناپذیر است و با انرژی حیرت انگیزی تمام قسمت های ارور وب را توسعه می دهد، آرش به سبک حرفه ای و انحصاری خود زندگی می کند و خط فکری خاصی را همیشه دنبال می کند، او رفتار هایی کاملا متفاوت نسبت به سایر مدیرانی که تا به حال دیده اید دارد...
همچنین ببینید
بستن
دکمه بازگشت به بالا