صفحات واکنش گرا با FlexBox و خاصیت Flex Container

آخرین بروز رسانی: اسفند ۸, ۱۳۹۴

صفحات واکنش گرا با FlexBox و خاصیت Flex Container

امروز با یه مبحث برای طرح بندی المنت ها با نام Flex Box در خدمت شما هستم,یکی از موارد که باید برای المنت ها انجام بدهیم طرح بندی اونهاست,برای طرح بندی یا همون layout از مدل های مختلفی از قبیل display ، margin: auto، max-width ، position ، float ، clear ، media query استفاده میکنیم,اماخب امروز میخوایم با مبحث Flex Box که یه مدل طرح بندی محتوا است که نسبت به سایر خصوصیات طرح بندی جدید تر است همراه شما باشیم.
Flexbox یک مدل طرح بندی محتواست که در CSS3 معرفی شد و هدف آن چیدمان و تراز بندی آسان آیتم هایی درون یک container است که اندازه ی آنها نامشخص می باشد. مدل Flexbox همانطور که از نامش پیداست برای طرح بندی آیتم هایی پویا و انعطاف پذیر به‌وجود آمده است.

طراحی ریسپانسیو با flexbox و خصوصیات flexcontainer

طراحی ریسپانسیو با flexbox و خصوصیات flexcontainer

Flexbox

هدف از Flexbox چیدمان و درست قرار دادان و تراز کردن آیتم ها درون یک container است ,که اندازه ی آن دقیقا مشخص نیست اما خب خیلی واضحه اگر کمی به نام Flexbox دقت کنید,این خصوصیت برای طرح بندی و آیتم های پویا و انعطاف پذیر است.اما در میان خصوصیت هایی که همیشه به display نسبت میدادیم ,خاصیت display: box بوده است, که جدید تر آن که امروز میخوام درباره آن صحبت کنم, display: flexاست . یکی از مزایایflex box پشتیبانی اکثر مرورگرها از آن است.

قابلیت مهم Flexbox:

Flex box در واقع یک ماژول یا مجموعه ای از دستورات Property ها است,که با استفاده از property های آن میتوان Layout هایی قابل انعطاف ایجاد کرد.مهم ترین قابلیت Flex box که مورد محبوبیت قرار گرفته است این است که با استفاده از آن میتوان طرح هایی واکنش گرا responsive ایجاد کرد.

دستورات و خاصیت های Flexbox:

زمانی که از کد display: flex استفاده میکینیم,آن المنت بهflex container و بچه هایش به flex items تبدیل میشوند. خاصیت(property) هایی برای flex container و خاصیت هایی برای flex items وجود دارد.که یک به یک با آن ها آشنا میشویم.

در ادامه این مطلب با خاصیت های flex container با ما همراه باشید,و در جلسه ی آینده خاصیت های مربوط به flex items برای شما آموزش داده میشود,پس با مطالب مفید د رخصووص ریسپانسیو کردن و انعطاف پذیر کردن صفحات وب سایتتان با ما همراه باشید.

Flexbox فلکس باکس یک سری خاصیت ها مهم و جدیدی دارد که این خاصیت ها همانطور که در ابتدای مطلب گفتم هم برروی flex container و هم برروی flex items تاثیر میگذارد,و لی توجه کنید که هیچ کدام از این دو مورد بر روی هم تاثیر نمیگذارند.

 

خاصیت های Flex Container

برای اینکه یک المنت به flex container  و بچه هایش به flex item تبدیل شوند باید به المنت مورد نظر display:flex; یاdisplay: inline-flex; بدهیم.

.container {

  display: flex; /* or inline-flex */

}

 خاصیت flex-direction:

خاصیت flex-direction نحوه ی قرار گرفتن flex item هارا به صورت ستونی و یا ردیفی تعیین میکند. این خاصیت چهار مقدار میگیرد.

.container {

  flex-direction: row | row-reverse | column | column-reverse;

}

 

  •  row:مقدار پیشفرض فلکس آیتم ها را به صورت ردیفی در کنار هم قرار میدهد. اگر direction  صفحه rtl  باشد، فلکس
  • آیتم ها از راست به چپ و در غیر اینصورت از چپ به راست در کنار همدیگر قرار میگیرند.
  • row-reverse: این مقدار مانند مقدار row هست با این تفاوت که چیدمان فلکس ایتم هارا معکوس میکند. اگر direction صفحه rtl باشد، فلکس آیتم ها از چپ به راست در کنار هم قرار میگیرند و در غیر اینصورت فلکس آیتم ها از راست به چپ قرار میگیرند.
  • column : با این مقدار فلکس آیتم ها به صورت ستونی و از بالا به پایین در کنار هم قرار میگیرند.
  • column-reverse : با این مقدار فلکس آیتم ها از پایین به بالا در کنار هم قرار میدهد.

خاصیتflex-warp

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

.container{

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

}

  •  nowrap: پیشفرض آیتم ها در یک خط و در کنار هم قرار میگیرند.
  •  wrap آیتم ها در چند خط  قرار میگیرند. در صفحات rtl از راست به چپ و در صفحات ltr از چپ به راست قرار میگیرند.
  • wrap-reverseاین مقدار معکوس مقدار wrap است.

 خاصیت flex-flow:

میتوانید دو مقدار flex-direction و flex-wrap را با استفاده از این مقدار تنظیم کنید. مقدار پیشفرض آن row nowrap است.

flex-flow: <flex-direction> || <flex-wrap>

خاصیت justify-content:

.container {

  justify-content: flex-start | flex-end | center | space-between | space-around;

}

  •  flex-start:پیشفرض آیتم ها در آغاز flex line قرار میگیرند.
  • flex-end: آیتم ها در پایان flex-line قرار میگیرند.
  • center :آیتم ها در وسط flex line قرار میگیرند.
  • space-between: آیتم اول در ابتدا و آیتم آخر در انتهای flex line قرار میگیرند و بقیه آیتم ها در بین آنها با یک فاصله ی برابر قرار میگیرند.
  • space-around:آیتم ها با فضای برابر در کنار یکدیگر قرار میگیرند.

 خاصیت align-items:

این خاصیت نحوه چینش فلکس‌آیتم هارا در محور عرضی(cross axis) مشخص میکند. این خاصیت مانند justify-content است تنها تفاوت آنها در مقادیرشان است.

.container {

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

}

 

  •  flex-start: آیتم‌ها در نقطه شروع عرضی(cross start) قرار میگیرند.
  • flex-end: آیتم ها در نقطه اتمام عرضی (cross end) قرار میگیرند.
  • center: آیتم ها در وسط flex line قرار میگیرند.
  • baseline: آیتم ها با توجه به خط هایشان هم‌تراز میشوند.
  • stretch: (پیشفرض) در صورتی که ارتفاع(height) آیتم‌ها مشخص نشده باشد، آیتم ها کشیده میشوند و flex line را پر میکنند.

 خاصیت align-content:

این خاصیت هنگامی که flex container دارای فضای بیشتر از flex line هاست، میتواند نحوه ی چینش آنها را تعیین کنید. مقادیر خاصیتalign-content برابر مقادیر خاصیت justify-content میباشد. تنها align-content یک مقدار بیشتر از justify-align دارد.

.container {

  align-content: flex-start | flex-end | center | space-between | space-around | stretch;

}

  •  flex-start: با این مقدار flex line ها در ابتدای flex container جمع میشود.
  • flex-end: با این مقدار flex line ها در انتهای flex container جمع میشوند.
  • center: با این مقدار flex line ها در وسط flex container جمع میشوند.
  • space-between: فضای خالی به طور مساوی بین flex line ها توضیع میشود. خط اولی در ابتدا و خط آخری در انتهای flex container قرار میگیرد.
  • space-around: فضای خالی به طور مساوی بین flex line ها تقسیم میشود.
  • stretch: (پیشفرض) flex line ها کشیده میشوند و فضای خالی را پر میکنند.

این بود آموزش ساخت صفحات ریسپانسیو با استفاده از فلکس باکس flex box و استفاده از خصوصیات flex container

مطالب مرتبط

کلیه حقوق مادی و معنوی این اثر متعلق به طراحی سایت اصفهان وب یار می باشد CopyRight 2017