Flexbox

فلکس باکس(Flexbox)چیست؟-بخش پیشرفته

خب تو این بخش میخوایم به اموزش فلکس باکس پیشرفته بپردازیم:

در ابتدا میخوام یه نکته ای رو در مورد بخش قبلی یعنی مقاله فلکس باکس بخش مقدماتی بگم،اگر جایی خواستید که از ویژگی های flex-direction و flex-wrap باهم استفاده کنید یک ویژگی وجود داره که کد های ما رو کوتا تر میکنه:

Flex-flow

این ویژگی مقدار های flex-direction و flex-wrap را به ترتیب میگیرد و کمک به کم کردن کد های ما میکنه.

.container {
  flex-flow: column wrap;
}

خب بریم سراغ ویژگی بعدی مقاله مون یعنی فلکس باکس پیشرفته که align-content  هستش.

Align-content

اگه بخوام ساده بگم این ویژگی نسخه عمودی justify-content  هستش و میاد و موارد ما رو به صورت عمود ترازبندی میکنه و در بیشتر از یک ردیف کاربرد داره.

مثلاً اگه تو justify-content وقتی ما space-around میدادیم موارد ما از به صورت افقی که چیده شدند از هم به طور مساوی فاصله میگرفتند ولی موارد اول و آخر با دیورا ظرف فاصلشون نصف بود حالا اگه توی align-content این مقدار رو بدیم خط های ما به صورت عمود از هم فاصله میگیرن و از بالا و پایین فاصله با موارد نصف میشه ولی فاصله بین خط ها مساوی میشه.

برای فهمیدن بهتر بعد از گفتن ویژگی ها عکسی میزارم که راحت درک کنید این ویژگی رو.

این ویژگی مثل justify-content شش مقدار میگیره:

normal (پیش فرض): موارد در موقعیت پیش فرض خود قرار می گیرند گویا هیچ مقداری تنظیم نشده است.

Flex-start : این ویژگی میاد موارد ما رو که در چند ردیف هستند رو از بالا و ابتدای خط ترازبندی میکنه.

Flex-end : این مقدار شبیه قبلی عمل میکنه با این تفاوت که موارد رو از پایین و ازانتهای خط ترازبندی میکنه.

Center : موارد رو وسط چین میکنه و در مرکز ظرف در وضعیت عمود قرار میده.

space-between : موارد با فا صله مساوی از همدیگر توزیع میشن به طوریکه ردیف اول در ابتدای ظرف است و ردیف آخر در انتهای اون قرار داره.

Space-around : موارد به طور مساوی با فضای برابر در اطراف هر خط توزیع می شوند.

Stretch : در این ویژگی موارد کشیده می شوند تا فضای باقیمانده را اشغال کنند و هم ارتفاع با ظرف خود شوند.

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch ;
}
فلکس باکس(Flexbox)چیست؟-بخش پیشرفته1

مثال:

فلکس باکس(Flexbox)چیست؟-بخش پیشرفته2

جواب:

فلکس باکس(Flexbox)چیست؟-بخش پیشرفته3
فلکس باکس(Flexbox)چیست؟-بخش پیشرفته4
فلکس باکس(Flexbox)چیست؟-بخش پیشرفته5
فلکس باکس(Flexbox)چیست؟-بخش پیشرفته6
فلکس باکس(Flexbox)چیست؟-بخش پیشرفته7

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

فلکس باکس(Flexbox)چیست؟-بخش پیشرفته8
فلکس باکس(Flexbox)چیست؟-بخش پیشرفته9
فلکس باکس(Flexbox)چیست؟-بخش پیشرفته10

Order

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

.item {
  order: 1;            /* default is 0 */
}
فلکس باکس(Flexbox)چیست؟-بخش پیشرفته11

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

مثال:

فلکس باکس(Flexbox)چیست؟-بخش پیشرفته12

جواب:

فلکس باکس(Flexbox)چیست؟-بخش پیشرفته13
فلکس باکس(Flexbox)چیست؟-بخش پیشرفته14
فلکس باکس(Flexbox)چیست؟-بخش پیشرفته15
فلکس باکس(Flexbox)چیست؟-بخش پیشرفته16
فلکس باکس(Flexbox)چیست؟-بخش پیشرفته17

Flex-grow

این ویژگی مقدار بزرگ شدن موارد را تعیین میکند .مقدار آن به طور پیشفرض صفر است . اگر مقدار یکی از موارد را تغییر بدهیم مثلاً 1 بگذاریم در صورتی که ظرف ما فضای خالی داشته باشد اون مورد که بهش مقدار داده شده به قدری بزرگ میشه که فضای خالی باقی نماند.یا اگر تمام موارد 1 باشد یکی از انها را 2 کنیم انداره ان دو برابر بقیه موارد میشود.

.item {
  flex-grow: 1;        /* default 0 */
}
فلکس باکس(Flexbox)چیست؟-بخش پیشرفته18

Flex-shrink

این ویژگی مورد فلکس رو نسبت به بقیه موارد متمایز میکند مقدار پیشفرض اون 1 هستش اگر مقدارش 1 باشه اندازش با بقیه موارد یکسان است ولی اگر صفر باشد دو برابر اندازه ی بقیه موارد داخل ظرف است که مقدارشان 1 است و اگر مقدارش بیشتر از 1 باشد اندازه اش کوچک تر از موارد 1 میشود .

.item {
  flex-shrink: 0;       /* default 1 */
}
فلکس باکس(Flexbox)چیست؟-بخش پیشرفته19

Flex-basis

این ویژگی به شما این امکان را میدهد که  به موارد خود طول و عرض (width;height) بدهید.

.item {
  flex-basis:  | auto;       /* default auto */
}
فلکس باکس(Flexbox)چیست؟-بخش پیشرفته20

Align-self

تا الان فهمیدید که برای جابه جایی به صورت عمود باید از align-items  استفاده کنید حال اگر بخواهیم تنها یک مورد از ظرف فلکس خود را انتخاب کنیم و جا به جا کنیم چطور؟

شما می توانید با align-self  این کار را انجام دهید.این ویژگی مقدارش به طور پیشفرض auto می باشد.align-self  همان مقادیر align-items  را میپذیرد با این تفاوت که مقادیر فقط یک مورد را جابه جا میکند.

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
فلکس باکس(Flexbox)چیست؟-بخش پیشرفته21
فلکس باکس(Flexbox)چیست؟-بخش پیشرفته22
فلکس باکس(Flexbox)چیست؟-بخش پیشرفته23
فلکس باکس(Flexbox)چیست؟-بخش پیشرفته24

مثال ترکیبی:

فلکس باکس(Flexbox)چیست؟-بخش پیشرفته25
فلکس باکس(Flexbox)چیست؟-بخش پیشرفته26
فلکس باکس(Flexbox)چیست؟-بخش پیشرفته27

Flex

خب حالا میخوام یه راهی برای کوتاه تر شدن کد هاتون بگم با استفاده از این ویژگی میتوانید کد های flex-grow و flex-shrink وflex-basis را به ترتیب مقدار هاشو وارد کنین.

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

خب قسمت فلکس باکس پیشرفته هم به پایان رسید امیدوارم لذت برده باشید.

آرش مرادوند

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

دیدگاهتان را بنویسید

دکمه بازگشت به بالا