جلسه ۴۱ – طبقه بندی به روش flexbox

Flexbox چیست؟ فلکس باکس چیست؟ در این مقاله می‌خواهیم به آموزش کامل Flexbox بپردازیم و به مقایسه فلکس باکس و گرید می‌پردازیم.

flexbox، توانایی های پیچیده تر و بیشتری از inline‌ و block داره و می‌تونه عناصر موجود در صفحه وب رو به راحتی پشت سر هم بچینه.

برای استفاده از flexbox، باید به عنصر پدری که عناصر رو در می‌گیره، دستور display:flex اختصاص بدیم. طراحی ریسپانسیو با flexbox خیلی ساده تر خواهد شد.

بعد از اختصاص دادن این دستور، CSS دست ما رو برای استفاده از یکسری دستورات دیگه باز می‌کنه که اون ها رو در ادامه بررسی می‌کنیم، و یاد می‌گیریم که چطور می‌تونن عناصر رو طبقه بندی و مرتب کنن. پس بریم که آشنایی با Flexbox در CSS را شروع کنیم.

مقدار flex

برای شروع آشنایی با فلکس باکس در CSS ، به مثال زیر توجه کنین:

<div id="parent">
   <div id="div1"></div>
   <div id="div2"></div>
   <div id="div3"></div>
   <div id="div4"></div>
</div>

#parent{
   display:flex;
}

#parent div{
   width:100px;
   height:100px;
   margin:10px;
}

#div1{
   background-color:red;
}

#div2{
   background-color:green;
}

#div3{
   background-color:blue;
}

#div4{
   background-color:orange;
}

همونطور که میبینیم، ۴ عنصر div داریم که داخل یه عنصر div پدر جا داده شدن.

برای اینکه بین عناصر داخلی، طبقه بندی flexbox رو برقرار کنیم، display:flex رو به عنصر پدرشون اختصاص دادیم.

هرکدوم از عناصر داخلی، رنگ متفاوتی دارن و برای مجزا بودن، ۱۰ پیکسل از اطراف فاصله گرفتن.

نتیجه رو به فرم زیر مشاهده می‌کنیم:

میبینیم که عناصر داخلی، برخلاف block بودنشون، inline رفتار کردن و در راستای یک خط یا row قرار گرفتن.

پس اولین تاثیر display:flex، اینه که عناصر داخلی رو، هر چی هم که باشن، در راستای یک خط مرتب می‌کنه.

حالا چطور عناصر داخلی رو دلخواه مرتب کنیم؟ ستونیشون کنیم؟ از هم فاصلشون بدیم؟ تمام این مشکلات توسط دستوراتی که display:flex برای ما آزاد می‌کنه، حل می‌شن. درباره flex در ادامه بیشتر صحبت می‌کنیم.

دستورات مربوط به flexbox

در ادامه آموزش جامع فلکس باکس ،به  دستورات مربوط به فلکس باکس می‌پردازیم که عبارتند از:

• flex-direction
• justify-content
• align-content
• align-items
• flex-wrap
• flex-grow
• flex-shrink
• flex-basis
• flex-flow

با استفاده از این دستورات می‌توانیم به طراحی صفحه با flexbox نزدیک تر شویم.

خاصیت flex-direction

گفتیم که دستور display:flex یا ویژگی Flex ، عناصر فرزند رو در راستای یه خط مرتب می‌کنه. حال می‌خواهیم در رابطه با Flex direction در css صحبت کنیم. توسط این خاصیت می‌تونیم سطر رو به ستون تبدیل کنیم!

خاصیت مورد نظر، می‌تونه ۴ مقدار رو قبول کنه. این ۴ مقدار عبارتند از:

• row: عناصر رو در راستای سطر قرار میده.
• column: عناصر رو در راستای ستون قرار میده.
• row-reverse: عناصر رو در راستای سطر، اما از انتها قرار میده.
• column-reverse: عناصر رو در راستای ستون، اما از انتها قرار میده.

برای مثال، مقدار column و column-reverse رو با هم امتحان می‌کنیم. به کد زیر توجه کنین:

کد HTML:

<div id="parent">
   <div id="div1">1</div>
   <div id="div2">2</div>
   <div id="div3">3</div>
   <div id="div4">4</div>
</div>

کد CSS آموزش فلکس باکس :

#parent{
   display: flex;
   flex-direction: column;
}

#parent div{
   width:100px;
   height:100px;
   margin:10px;
   color:white;
} 

#div1{
   background-color:red;
}

#div2{
   background-color:green;
}

#div3{
   background-color:blue;
}

#div4{
   background-color:orange;
}

نتیجه یکی دیگر از فلکس باکس در سی اس اس :

همونطور که میبینیم، تونستیم عناصر فرزند رو در راستای ستونی توسط دستور flex-direction:column از ویژگی flexbox مرتب کنیم.
حالا کد CSS رو اینبار با flex-direction:column-reverse می‌نویسیم.

کد CSS:

#parent{
   display: flex;
   flex-direction: column-reverse;
}

نتیجه این مثال از ویژگی فلکس باکس به صورت زیر تغییر می‌کنه:

توسط مقدار column-reverse تونستیم ترتیب عناصر فرزند رو کاملا وارونه کنیم.

مقادیر row و row-reverse هم به شکل همین مثال، اما در راستای سطر، عمل می‌کنن.

خاصیت flex-grow

به مثال زیر که شبیه به مثال های قبله، یه نگاهی بندازین: ( Flex grow در css )

کد HTML آموزش Flexbox :

<div id="parent">
   <div id="div1">1</div>
   <div id="div2">2</div>
   <div id="div3">3</div>
   <div id="div4">4</div>
</div>

کد CSS:

#parent{
   display: flex;
   flex-direction: row;
}

#parent div{
   width:100px;
   height:100px;
   margin:10px;
   color:white;
}

#div1{
   background-color:red;
}

#div2{
   background-color:green;
}

#div3{
   background-color:blue;
}

#div4{
   background-color:orange;
}

تو نتیجه این کد، یه فضای خالی به وجود میاد که به فرم زیره:

به وجود اومدن چنین فضایی، چه در حالتی که جهت flex ما سطر و چه ستون باشه، کاملا طبیعیه و به دو دلیل به وجود میاد:

• یا اندازه عنصر پدر رو خیلی بزرگ گرفتیم.
• یا اندازه عناصر فرزند کوچیکه.

خب، خاصیت flex-grow اینجا به کمک ما میاد، به این صورت که با دادن این خاصیت به هر عنصر، می‌تونیم اونارو مجبور کنیم که این جای خالی رو پر کنن. حالا چطوری؟

این خاصیت، اعداد رو به عنوان مقادیر قبول می‌کنه و جای خالی ایجاد شده رو به عنوان عدد ۱ در نظر می‌گیره.

به عبارتی اگه به div دوم، دستور flex-grow:1 رو اختصاص بدیم، با چنین نتیجه ای طرف خواهیم بود:

بنا بر این منطق، ما می‌تونیم جای خالی ایجاد شده رو توسط چند div هم پر کنیم، پس کد CSSای که چندی پیش نوشتیم رو در چند جا تغییر میدیم.

#div2{
   background-color:green;
   flex-grow:0.3;
}

#div3{
   background-color:blue;
   flex-grow:0.7;
}

نتیجه:

خاصیت flex-wrap

خاصیت Flex wrap در CSS به درد این می‌خوره که عناصر رو بین سطر ها و ستون های مختلف تقسیم کنه و اجازه نده همشون فقط تو یه سطر و ستون فشرده بشن.

فرض کنین تو مثال قبل، مجبور بشیم که تعداد عناصر فرزند رو بالا ببریم.

یا مجبور بشیم که عرض اون هارو زیاد کنیم، پس کد رو به شکل زیر تغییر می‌دیم:

#parent div{
   width:500px;
   height:100px;
   margin:10px;
   color:white;
}

نتیجه به شکل زیر درمیاد:

اینجا میبینیم که تمامی عناصر فرزند هنوز در راستای یک خط هستن. اما بحث اینجاست که عرض هیچکدوم از اون ها، ۵۰۰ پیکسل نیست، بلکه عرض فقط تاجایی زیاد شده که عرض صفحه ما گنجایش اون رو داره.

ما اگه عرض رو از ۵۰۰ پیکسل، به ۱۰۰۰ پیکسل هم برسونیم، باز همین نتیجه رو می‌گیریم و هیچ تغییری مشاهده نمی‌کنیم!

در اینجا ما از flex-wrap استفاده می‌‌کنیم، دستوری که باعث می‌شه عناصر رو در خطوط یا ستون های مجزا تقسیم کنیم.

این دستور ۳ مقدار رو قبول می‌کنه:

• no-wrap: مقدار پیش فرضی که عناصر رو در یک خط یا ستون میچینه.
• wrap: مقداری که عناصر رو، به ترتیب بین خطوط و ستون ها تقسیم می‌کنه.
• wrap-reverse: مقداری که عناصر رو، بر خلاف ترتیب بین خطوط و ستون ها تقسیم می‌کنه.

حالا به عنصر پدر، دستور flex-wrap:wrap رو اضافه می‌کنیم.

#parent{
   display: flex;
   flex-direction: row;
flex-wrap: wrap;
}

نتیجه به فرم زیر تغییر می‌کنه:

حالا مقدار wrap-reverse رو بررسی می‌کنیم.

#parent{
   display: flex;
   flex-direction: row;
   flex-wrap: wrap-reverse;
}

نتیجه صفحه آرایی با فلکس باکس :

همونطور که میبینیم، عناصر فرزند، به ترتیب معکوس چیده شدن.

خاصیت flex-shrink

خاصیت Flex shrink در css ، کاملا معکوس خاصیت flex-grow رفتار می‌کنه.

به این معنا که با کوچکتر شدن صفحه، عنصر فرزندی که دارای مقدار flex-shrink بیشتری هست، به نسبت بقیه عناصر فرزند، عرض کوچکتری رو به خودش می‌گیره.

خاصیت flex-flow

خاصیت flex flow در CSS ، خلاصه شده flex-direction و flex-wrap هست. توسط این خاصیت می‌تونیم دو کاربرد رو در یک دستور خلاصه کنیم.

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

#parent{
   display: flex;
   flex-flow: row wrap;
}

و نتیجه دقیقا شبیه مثال خاصیت flex-wrap خواهد بود:

خاصیت flex-basis

خاصیت flex basis در CSS ، اندازه و ابعاد یک آیتم flex رو مشخص می‌کنه.

از این خاصیت می‌تونیم به جای width، زمانی که جهت flex ما خطیه، و به جای height، زمانی که جهت flex ما ستونیه استفاده کنیم.

مقادیر مورد قبول این خاصیت عبارتند از:

• auto: مقدار پیش فرض (ابعاد عنصر متناسب با محتوای آن خواهد بود)
• مقدار عددی بر حسب واحد های نامتغیر
• مقدار درصدی

تراز افقی با خاصیت justify-content

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

مقادیر مورد قبول این خاصیت به ترتیب زیر هستن:

• center: عناصر فرزند رو به وسط عنصر پدر میاره.

فرض کنیم که کد CSS مثال های قبل رو به فرم زیر تغییر بدیم:

#parent{
   display: flex;
   flex-direction: row;
   justify-content: center;
}

نتیجه این مثال از آموزش flexbox در css به فرم زیر مشاهده میشه:

در اینجا میبینیم که طبق تعریف، عناصر فرزند به وسط عنصر پدر ( با عرض 100% ) هدایت شدن.

• flex-start: عناصر فرزند رو به ابتدای عنصر پدر می‌بره.

حالا کد رو توسط این مقدار، تغییر میدیم تا ببینیم منظور از ابتدای عنصر پدر چیه؟

#parent{
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
}

نتیجه این مثال از خاصیت flex در CSS :

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

دقیق تر بگیم، وقتی تو یه صفحه، جهت نوشتار ما چپ چین باشه، تولید محتوا از سمت چپ شروع می‌شه و در صورت راست چین بودن، برعکس این اتفاق میفته.

نکته: جهت تولید محتوا در یک صفحه،‌توسط خاصیت و دو مقدار زیر اتفاق میفته:

body{
direction: ltr;
}
/* --- یا --- */
body{
direction: rtl;
}

• flex-end: عناصر فرزند رو به انتهای عنصر پدر می‌بره.

کاملا مشابه مقدار flex-start در فلکس باکس در CSS3 ، منتهی به صورت معکوس.

توضیح در مورد flexbox : بدین ترتیب که تولید محتوا از هرطرفی که باشه، توسط این مقدار، می‌تونیم برخلاف اون جهت تولید محتوا رو انجام بدیم.

• space-between: متناسب با عرض عنصر پدر، عناصر رو تقسیم می‌کنه.

ساده بگیم، بدون دست زدن به عرض عناصر، به شکلی مرتبشون می‌کنه که تمام عرض عنصر پدر رو در بر بگیرن. نتیجه این مقدار رو در شکل زیر میبینیم:

• space-around: مشابه مقدار space-betweem، با این تفاوت که دور عناصر ابتدا و انتها فضا ایجاد می‌کنه.

با یک عملکرد مشابه space-between، و با این تفاوت که فاصله بین عناصر رو ملایم تر تنظیم می‌کنه و دور هرکدوم از اون‌ها یه فاصله ایجاد می‌کنه:

اگه جایی از مثال ها رو متوجه نمی‌شید، حتما تو قسمت نظرات پایگاه دانش میزفا بپرسین تا کمکتون کنیم 🙂

تراز عمودی با خاصیت align-items

این خاصیت، کاملا شبیه به خاصیت justify-content اما در راستای محور عمودی هست.

نکته: این خاصیت تنها زمانی کار می‌کنه که عنصر پدر مورد نظر، دارای ارتفاعی بیشتر از ارتفاع عناصر فرزند خودش باشه.

مقادیر مورد قبول این خاصیت عباتند از:

• center: محتوا رو در راستای ارتفاع عنصر پدر، وسط چین می‌کنه.

کافیه کد CSS عنصر پدر رو به فرم زیر تغییر بدیم:

#parent{
   display: flex;
   flex-direction: row;
   align-items: center;
   height: 500px;
}

نتیجه رو به فرم زیر مشاهده می‌کنیم:

• flex-start: محتوا رو از بالای عنصر پدر تولید می‌کنه.

کافیه مقدار خاصیت align-items رو به flex-start تغییر بدیم:

#parent{
   display: flex;
   flex-direction: row;
   align-items: flex-start;
   height: 500px;
}

• flex-end: محتوا رو از پایین عنصر پدر تولید می‌کنه.

#parent{
   display: flex;
   flex-direction: row;
   align-items: flex-end;
   height: 500px;
}

• stretch: محتوا در راستای ارتفاع عنصر پدر، گسترش میده.

نکته اینجاست که مقدار موردنظر، در صورتی کار می‌کنه که به هیچکدوم از divها، ارتفاع خاصی اختصاص داده نشده باشه.

#parent{
   display: flex;
   flex-direction: row;
   align-items: stretch;
   height: 500px;
}

• baseline: عناصر فرزند، در راستای خط مبدا خودشون تراز میشن.

برای استفاده از این مقدار، اول باید بدونیم که baseline یا خط مبدا به چه معنیه؟

این مفهوم تعریف دقیقی نداره، اما در یک تعریف ساده، به خطی اطلاق میشه که “زیر محتوای عنصر کشیده میشه”

بر اساس همین تعریف، کافیه که محتوای هر عنصر رو یکم تغییر بدیم و ببینیم که این مقدار چطور رفتار میکنه:

نکته بسیار مهم: اگه جهت flex رو به صورت column قرار بدیم، کاربرد justify-content و align-items باهم عوض می‌شه. خاصیت اول عناصر فرزند رو به صورت عمودی، و خاصیت دوم اون ها رو به صورت افقی تراز می‌کنه.

قبل از اینکه بریم سراغ بخش بعدی :‌ تا الان متوجه شدین که flexbox با جدول در css متفاوته دیگه نه ؟

تراز محتوا با خاصیت align-content

این خاصیت، مخلوطی از دو خاصیت align-items و justify-content هست و همزمان کمی با اون ها متفاوت رفتار می‌کنه.

وظیفه ی این خاصیت، انجام تراز عمودی برای خطوطی هست که عناصر فرزند رو در بردارن، و مقادیر مورد قبول اون به شرح زیره:

• center – سنتر
• flex-start – فلکس استارت (شروع فلکس)
• flex-end – فلکس اند (پایان فلکس)
• stretch – استرچ
• space-around – اسپیس اروند (فاصله از اطراف)
• space-between – اسپیس بیت وین (فاصله از هم یا فاصله بین)

به مثال زیر توجه کنین:

#parent{
   display: flex;
   flex-wrap: wrap;
   align-content: space-around;
   height: 500px;
}

نتیجه:

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

نکته: این خاصیت زمانی عمل می‌کنه که عناصر فرزند ما در بیشتر از یک خط چیده شده باشن.

نکته: خاصیت های align-items، justify-content و align-content با توجه به جهت flex عنصر پدر (flex-direction) رفتار می‌کنن. برای مثال، اگه عناصر flex ما در راستای ستونی باشن، خاصیت justify-content تراز دهی عمودی رو انجام می‌ده. دو خاصیت دیگه هم به این منوال تغییر می‌کنن.

پایان ترم

سوال:

تو مثال زیر، با نوشتن چه کدی تو جای مشخص شده، می‌تونیم عناصر حاوی لینک رو به صورت زیر مرتب کنیم؟

دقت کنین که فاصله لینک اول از بالا، و فاصله لینک چهارم از پایین کاملا یکسانه.

36873

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

نتیجه گیری

تو این مقاله آموزش css3 ، با خاصیت flex و خاصیت های کوچک تر مربوط به اون آشنا شدیم و یک جورایی آموزش کامل فلکس باکس را با همدیگه داشتیم، در این مقاله نشد که مقایسه Flexbox و Grid را بررسی کنیم ولی در یک مقاله جداگانه حتما این موضوع مهم را بررسی خواهیم کرد.

• flex-direction: فلکس دایرکشن وظیفه مشخص کردن ترتیب قرارگیری عناصر flex را دارد
• justify-content: جاستیفای کانتنت وظیفه تراز عناصر flex را دارد
• align-content: الاین کانتنت وظیفه تراز خطوط حاوی عناصر flex را دارد
• align-items: الاین آیتمز وظیفه تراز عناصر flex را دارد
• flex-wrap: فلکس رپ (ورپ خونده نمیشه) وظیفه فرستادن عناصر flex به خطوط و ستون های بعد را دارد
• flex-grow: فلکس گرو وظیفه تنظیم بیشترین حجم یک عنصر flex را دارد
• flex-shrink: فلکس شرینک وظیفه تنظیم کمترین حجم یک عنصر flex را دارد
• flex-basis: فلکس بیسیس وظیفه تنظیم ابعاد عناصر flex را دارد
• flex-flow: فلکس فلو خاصیت کوتاه شده flex-direction و flex-wrap می‌باشد

اگه نکته، پیشنهاد و انتقادی در رابطه با آموزش‌ها دارین، خیلی خیلی خوشحال می‌ شیم که اون رو در بخش دیدگاه‌های پایگاه دانش میزفا ارسال کنین.

مدیر و سئو محتوا: علی اسمعیلی‌