آموزش طراحی صفحات وب واکنش گرا با FlexBox

خانه » بلاگ » css » آموزش طراحی صفحات وب واکنش گرا با FlexBox

آموزش فلکس باکس و  استفاده از ویژگی Flex Container

امروز با یه مبحث برای طرح بندی المنت ها با نام آموزش flexbox در خدمت شما هستم، یکی از موارد که باید برای المنت ها انجام بدهیم طرح بندی اونهاست، برای طرح بندی یا همون layout از مدل های مختلفی از قبیل display،margin:auto،max-width،position،float،clear،media،query استفاده می کنیم.

Flexbox یک مدل طرح بندی محتواست که در CSS3 معرفی شد و هدف آن چیدمان و تراز بندی آسان آیتم هایی درون یک container است که اندازه ی آنها نامشخص می باشد. مدل Flexbox همانطور که از نامش پیداست برای طرح بندی آیتم هایی پویا و انعطاف پذیر به‌وجود آمده است.

قابلیت مهم فلکس باکس

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

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

مهمترین دستورات و ویژگی های Flexbox

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

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

خاصیت های Flex Container

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

.container {

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

}

آموزش flexbox و خاصیت 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 : با این مقدار فلکس آیتم ها از پایین به بالا در کنار هم قرار میدهد

nowrap: پیشفرض آیتم ها در یک خط و در کنار هم قرار میگیرند.

wrap آیتم ها در چند خط  قرار میگیرند. در صفحات rtl از راست به چپ و در صفحات ltr از چپ به راست قرار میگیرند.

wrap-reverse این مقدار معکوس مقدار wrap است.

آموزش flexbox و ویژگی های Flex items

 

flex-grow

این خاصیت توانایی بزرگ شدن یک آیتم را تعیین میکند. این خاصیت یک مقدار عددی بدون واحد میپذیرد. مقدار پیشفرض آن ۰ است؛ یعنی آیتم‌ها توانایی بزرگ شدن را ندارند. در صورتی که flex container فضای خالی داشته باشد و به یک آیتم flex-grow: 1; بدهید، آن آیتم تا جایی بزرگ میشود که فضای خالی درون container از بین برود.

دقت داشته باشید که هنگامی که خاصیت flex-direction فلکس container برابر row باشد، flex-grow بر عرض(width) آیتم اعمال میشود و اگر مقدار آن خاصیت برابر column باشد، flex-grow بر ارتفاع(height) اعمال میشود.

.item2{
flex-grow: 1;

}

اگر به همه ی فلکس آیتم ها flex-grow: 1; بدهید، همه ی آنها به یک اندازه بزرگ میشوند. اگر در همین حالت مقدار flex-grow یکی از آیتم هارا ۲ قرار دهید، آن آیتم ۲ برابر دیگر آیتم خواهد شد.

آموزش flexbox و flex-shrink

این خاصیت توانایی کوچک شدن یک آیتم را در صورت لزوم تعیین میکند. مقدار پیشفرض آن ۱ است، یعنی آیتم ها میتوانند کوچک شوند. اگر خاصیتflex-wrap فلکس container برابرnowrap باشد، آیتم ها تا زمانی که عرضشان به ۰ برسد کوچک میشوند. حال اگر در این صورت مقدار flex-shrink یکی از آیتم ها را برابر ۲ قرار دهیم، آن آیتم ۲ برابر دیگر آیتم ها کوچک میشود.

.container{
flex-wrap: nowrap;

}

.container .item2{

flex-shrink: 2;

}

 

flex-basis

این خاصیت مقدار پایه ی عرض یا ارتفاع آیتم را تعیین میکند. یعنی عرض یا ارتفاع(به ستونی یا ردیفی بودن آیتم ها بستگی دارد) از این مقدار پایه نمیتواند کمتر شود. این خاصیت مانند min-height و min-width عمل میکند. مقدار پیشفرض این خاصیت auto می باشد، یعنی فلکس آیتم ها میتوانند تا جایی کوچک شوند که عرض یا اتفاع آنها به صفر برسد.

.item{
flex-grow: 1;

}

.item2{

flex-basis: 200px;

}

flex
این خاصیت یک مختصر نویسی برای خاصیت های flex-grow ، flex-shrink و flex-basis میباشد.

.item{
flex: none | [<flex-grow> <flex-shrink> <flex-basis>];

}

مقادیر دوم و سوم (flex-shrink و flex-basis) اختیاری هستند.

order

این مقدار میتواند مکان قرار گیری فلکس آیتم در کنار دیگر فلکس ایتم ها را مشخص کند. مقدار پیشفرض ۰ است. اگر تنها مقدار order یکی از فلکس آیتم هارا تعیین کنید، آن آیتم بعد از تمامی آیتم ها قرار میگیرد، ولی اگر این خاصیت را برای همه ی فلکس ایتم ها تعریف کنید، میتوانید جایگاه قرار گیری فلکس آیتم هارا مشخص کنید. این خاصیت یکی از کاربردی ترین خاصیت ها هنگام طراحی واکنش‌گرا(responsive) هست.

.item{
flex: 1 100px; /* flex-grow: 1; flex-basis: 100px; */

}

.item1{order: 2;}

.item2{order: 4;}

.item3{order: 1;}

.item4{order: 3;}

align-self

مقدار پیشفرض این خاصیت مقدار تعیین شده برای خاصیت align-items خاصیت مربوط به (flex container) میباشد. با استفاده از این خاصیت میتوان نحوه ی قرار گرفتن عمودی(در محور عرضی یا cross axis) قلکس آیتم هارا فردی کرد. مقادیر این خاصیت مانند مقادیر خاصیت align-items است.

.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;

}

.container{
align-items: flex-start;

}

.container .item2{

align-self: flex-end;

}

 خاصیت 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 را پر میکنند.

آموزش flexbox و خاصیت 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 ها کشیده میشوند و فضای خالی را پر میکنند.

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