آموزش فلکس‌باکس در CSS - رایگان - صفر تا صد

فایل‌های این بخش را از اینجا دانلود کنید.

در جلسه‌ی گذشته، درباره‌ی ویژگی display در CSS صحبت کردیم و گفتیم این ویژگی (property - پراپرتی) یکی از ویژگی‌های کلیدی در طراحی صفحات وب است.
وظیفه‌ی این ویژگی تعیین نحوه‌ی نمایش یا عدم نمایش عناصر در صفحه می‌باشد. مقادیر none، block، inline و inline-block را بررسی کردیم و کاربرد هر کدام را دیدیم. در این بخش، قصد داریم با یکی دیگر از مقادیر مهم و کاربردی این ویژگی یعنی Flex آشنا شویم.

معرفی Flexbox در CSS

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

یک<div> اصلی است که سه دیو فرزند داخل آن قرار گرفته‌اند.
هر <div> فرزند شامل یک عنوان و یک پاراگراف است.

<div>
    <div>
        <h2>عنوان شماره ۱</h2>
        <p>سکان آکادمی CSS یک پاراگراف برای استفاده در جلسه ۳۷ دوره</p>
    </div>
    <div>
        <h2>عنوان شماره ۲</h2>
        <p>سکان آکادمی CSS یک پاراگراف برای استفاده در جلسه ۳۷ دوره</p>
    </div>
    <div>
        <h2>عنوان شماره ۳</h2>
        <p>سکان آکادمی CSS یک پاراگراف برای استفاده در جلسه ۳۷ دوره</p>
    </div>
</div>

برای شروع، کلاس container را به دیو اصلی اختصاص می‌دهیم و در CSS، پراپرتی display آن را برابر با flex قرار می‌دهیم.

.container {
    display: flex;
}

و سپس آن را به عنوان کلاس اضافه می‌کنیم.

<div class="container">
    <div>
        <h2>عنوان شماره ۱</h2>
        <p>سکان آکادمی CSS یک پاراگراف برای استفاده در جلسه ۳۷ دوره</p>
    </div>
    <div>
        <h2>عنوان شماره ۲</h2>
        <p>سکان آکادمی CSS یک پاراگراف برای استفاده در جلسه ۳۷ دوره</p>
    </div>
    <div>
        <h2>عنوان شماره ۳</h2>
        <p>سکان آکادمی CSS یک پاراگراف برای استفاده در جلسه ۳۷ دوره</p>
    </div>
</div>

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

زمانی که مقدار display برای div اصلی یا همان والد را برابر با flex قرار می‌دهیم (display: flex)، مجموعه‌ای از ویژگی‌های جدید در دسترس ما قرار می‌گیرد که امکان کنترل دقیق‌تر و منعطف‌تر چیدمان عناصر را فراهم می‌کند، از جمله:

تعیین جهت نمایش
نحوه‌ی تراز شدن آیتم‌ها
فاصله بین عناصر
اندازه‌ی عناصر

افزودن کلاس و استایل برای آیتم‌ها

برای وضوح بیشتر، یک کلاس items به هر دیو فرزند اختصاص می‌دهیم و به آن‌ها border اضافه می‌کنیم.
این کار مرز هر div را مشخص می‌کند و تشخیص آیتم‌ها در صفحه آسان‌تر می‌شود. به عنوان مثال:

ضخامت: ۲ پیکسل
رنگ: طلایی (gold)

.items {
    border: solid 2px gold;
}

<div class="container">
    <div class="items">
        <h2>عنوان شماره ۱</h2>
        <p>سکان آکادمی CSS یک پاراگراف برای استفاده در جلسه ۳۷ دوره</p>
    </div>
    <div class="items">
        <h2>عنوان شماره ۲</h2>
        <p>سکان آکادمی CSS یک پاراگراف برای استفاده در جلسه ۳۷ دوره</p>
    </div>
    <div class="items">
        <h2>عنوان شماره ۳</h2>
        <p>سکان آکادمی CSS یک پاراگراف برای استفاده در جلسه ۳۷ دوره</p>
    </div>
</div>

پس از اختصاص کلاس و افزودن استایل، با رفرش صفحه مشاهده می‌کنیم که مرز هر div به خوبی مشخص شده است.

پراپرتی Flex Basis

این ویژگی اندازه‌ی اولیه‌ی هر آیتم را مشخص می‌کند. به‌صورت پیش‌فرض، تمام آیتم‌های داخل یک فلکس دارای عرض یکسان هستند. با استفاده از flex-basis می‌توانیم اندازه‌ای متفاوت برای هر آیتم تعیین کنیم. مثال:

مقدار پیکسلی: می‌توانیم ۲۰۰ پیکسل تعیین کنیم. در این حالت هر آیتم به اندازه ۲۰۰ پیکسل نمایش داده می‌شود.

.items {
	border: solid 2px gold;
    
	flex-basis: 200px;
}

یا می‌توانیم مقدار درصدی تعیین کنیم. در این حالت هر آیتم یک سوم عرض کانتینر را اشغال می‌کند.

.items {
    border: solid 2px gold;
    
	flex-basis: 33%;
}

و نتیجه می‌شود:

پراپرتی Flex Direction

پراپرتی بعدی، flex-direction است که مقدار پیش‌فرض آن row است. این ویژگی مشخص می‌کند که آیتم‌ها در چه جهتی قرار بگیرند. زمانی که صفحه راست‌چین (Right-to-Left) باشد، آیتم‌ها از سمت راست پر می‌شوند.
مقادیر قابل استفاده:

row (افقی، از ابتدا به انتها)
row-reverse (افقی، معکوس)
column (عمودی، از بالا به پایین)
column-reverse (عمودی، معکوس)

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

ردیفی (Horizontal)

در اینجا:

مقدار پیش‌فرض row است و آیتم‌ها به صورت افقی از ابتدا تا انتها قرار می‌گیرند.
در مثال ما، به دلیل اینکه مقدار direction را RTL (Right to Left) قرار داده‌ایم، ترتیب آیتم‌ها از راست به چپ نمایش داده می‌شود.

<html lang="fa" dir="rtl">

با تغییر مقدار به LTR (Left to Right)، ترتیب آیتم‌ها به حالت چپ به راست تغییر می‌کند.

<html lang="fa" dir="ltr">

ستونی (Column)

در اینجا می‌توان آیتم‌ها را به صورت ستونی نمایش داد، یعنی زیر هم قرار می‌گیرند.

.container {
  display: flex;
  flex-direction: column;
}

نتیجه پراپرتی flex direction column در CSS

یا اگر از column-reverse استفاده کنیم، ترتیب آیتم‌ها معکوس می‌شود و آخرین آیتم در بالا و اولین آیتم در پایین قرار می‌گیرد و ترتیب افقی آیتم‌ها را معکوس می‌کند:

.container {
  display: flex;
  flex-direction: column-reverse;
}

نتیجه پراپرتی Column Reverse در CSS
یا همین ترتیب می‌تواند به این شکل نیز باشد:

.container {
  display: flex;
  flex-direction: row-reverse;
}

نتیجه می‌شود:
نتیجه پراپرتی Row reverse در دوره CSS
برای بازگشت به ترتیب اولیه، کافی است مقدار flex-direction را به حالت پیش‌فرض بازگردانیم.

پراپرتی Flex Wrap

ویژگی flex-wrap کنترل می‌کند که آیتم‌های ما چگونه بسته‌بندی می‌شوند:

nowrap (پیش‌فرض): مرورگر تمام آیتم‌ها را در یک سطر جا می‌دهد حتی اگر لازم باشد عرض هر آیتم کاهش یابد.
wrap: آیتم‌ها اندازه‌ی واقعی خود را حفظ می‌کنند و در صورت کمبود فضا، به خط بعدی منتقل می‌شوند.
wrap-reverse: آیتم‌ها از پایین صفحه شروع به چیدمان می‌کنند و خطوط بعدی به سمت بالا اضافه می‌شوند.

مقدار پیش‌فرض این پراپرتی nowrap است، یعنی آیتم‌ها در یک خط قرار می‌گیرند و به خط بعدی نمی‌روند. با تغییر مقدار به wrap، آیتم‌ها در صورت عدم جا شدن در یک خط، به خط بعدی منتقل می‌شوند. در اینجا آیتم‌ها %33 هستند و به خط بعدی منتقل نمی‌شوند، اما اگر عرض آیتم‌ها را به %۴۰ افزایش دهیم، آیتم سوم در خط اول جا نمی‌شود و به خط دوم منتقل می‌شود:

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.items {
  border: solid 1px gold;
  flex-basis: 40%;
}

که نتیجه می‌شود:
نتیجه پراپرتی Flex Wrap

پراپرتی Wrap Reverse

مقدار wrap-reverse رفتار مشابهی دارد، با این تفاوت که پر شدن خطوط از خط پایین به بالا انجام می‌شود:

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

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap-reverse;
}
.items {
  border: solid 1px gold;
  flex-basis: 40%;
}

پراپرتی Flex Flow

اگر بخواهیم flex-direction و flex-wrap را هم‌زمان تنظیم کنیم، می‌توانیم از پراپرتی ترکیبی flex-flow استفاده کنیم. این ویژگی در واقع میان‌بری برای تعیین جهت و نحوه‌ی بسته‌بندی آیتم‌ها به صورت هم‌زمان است. بنابراین به جای دو پراپرتی قبلی، می‌توان تنها از flex-flow استفاده کرد.

در این بخش، قصد داریم flex-flow را عملی کنیم:

در ابتدا مقدار flex-direction را روی row و flex-wrap را روی nowrap قرار داده‌ایم.

.container {
  display: flex;
  /*
  flex-direction: row;
  flex-wrap: wrap-reverse;
  */
}

سپس با استفاده از flex-flow می‌توانیم هم جهت چیدمان flex-direction و هم رفتار رپ کردن آیتم‌ها flex-wrap را با یک دستور ترکیبی کنترل کنیم.

.container {
  display: flex;
  /*
  flex-direction: row;
  flex-wrap: wrap-reverse;
  */
  flex-flow: row wrap-reverse;
}

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

پراپرتی‌ Flex Grow

مقدار پیش‌فرض این پراپرتی صفر است، به این معنا که همه آیتم‌ها برابر در نظر گرفته می‌شوند:

مقدار پیش‌فرض flex grow صفر است، به این معنا که اندازه همه آیتم‌ها برابرند

می‌توانیم مقدار این پراپرتی را تغییر دهیم تا یک آیتم فضای بیشتری نسبت به دیگران اشغال کند. به عنوان مثال:

اگر برای یک آیتم مقدار ۲ و برای دو آیتم دیگر مقدار ۱ در نظر بگیریم، فضا به نسبت ۱:۲:۱ تقسیم می‌شود.

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

sokanOne. برای آیتم اول
sokanTwo. برای آیتم دوم
sokanThree. برای آیتم سوم

<div class="container">
    <div class="items sokanOne">
        <h2>عنوان شماره ۱</h2>
        <p>سکان آکادمی CSS یک پاراگراف برای استفاده در جلسه ۳۷ دوره</p>
    </div>
    <div class="items sokanTwo">
        <h2>عنوان شماره ۲</h2>
        <p>سکان آکادمی CSS یک پاراگراف برای استفاده در جلسه ۳۷ دوره</p>
    </div>
    <div class="items sokanThree">
        <h2>عنوان شماره ۳</h2>
        <p>سکان آکادمی CSS یک پاراگراف برای استفاده در جلسه ۳۷ دوره</p>
    </div>
</div>

سپس استایل هر کلاس را تعریف می‌کنیم:

.sokanOne {
  flex-grow: 1;
}

.sokanTwo {
  flex-grow: 3;
}

.sokanThree {
  flex-grow: 1; 
}

بعد از رفرش کردن می‌بینیم که:
نتیجه پراپرتی‌ Flex Grow
توجه: اگر flex-basis محدودیتی داشته باشد (مثلاً 33%)، اثر flex-grow دیده نمی‌شود. در این حالت باید مقدار flex-basis را حذف یا کامنت کنیم تا افزایش اندازه اعمال شود.

مدیریت کامنت‌ها در کد

برای تست و تغییر موقت پراپرتی‌ها، می‌توانیم از کامنت‌ها استفاده کنیم:

با انتخاب کد و استفاده از شورتکات Ctrl + K + C ، کد کامنت می‌شود.
برای بازگرداندن، از Ctrl + K + U استفاده می‌کنیم.

این روش کمک می‌کند بدون پاک کردن کد، پراپرتی‌ها را تست و مقایسه کنیم.

پراپرتی Flex Shrink

flex-shrink عملکردی برعکس flex-grow دارد و نشان‌دهنده میزان کوچک شدن آیتم‌ها است (shrink به معنای آب رفتن است).
به عبارتی، وقتی مقداری برای این پراپرتی تعیین می‌کنید، نشان می‌دهید که آیتم مورد نظر چه مقدار از فضای باقی‌مانده را به دیگران می‌دهد (به عنوان مثال اگر شما مقدار flex-shrink را برای عنصری برابر با 2 بگذارید، در واقع نصف بقیه به آن فضا میدهید). این پراپرتی کاملاً برعکس flex-grow عمل می‌کند.

پراپرتی‌های Flex Shrink و Flex Grow برعکس هم عمل می‌کنند

فرض کنید یک کانتینر با عرض ۵۰۰ پیکسل داریم و سه آیتم داخل آن قرار دارند:

.sokanOne {
  /* flex-grow: 1; */
  flex-shrink: 1;
}

.sokanTwo {
  /* flex-grow: 3; */
  flex-shrink: 4;
}

.sokanThree {
  /* flex-grow: 1; */
  /* cntrl+k+c */
  flex-shrink: 1;
}

بعد از رفرش می‌بینیم که:

پس از اعمال این مقادیر، آیتم‌ها با نسبت ۱:۴:۱ کوچک می‌شوند تا کل کانتینر همان ۵۰۰ پیکسل حفظ شود. این مثال به خوبی نشان می‌دهد که flex-shrink چطور آیتم‌ها را نسبت به یکدیگر کوچک می‌کند.
توجه: برای تست و مشاهده تاثیر کامل، می‌توان مقادیر flex-basis یا محدودیت‌های دیگر را موقتاً کامنت کرد.

پراپرتی Order

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

.sokanOne {
  /* flex-grow: 1; */
  /* flex-shrink: 1; */
  order: 2;
}

.sokanTwo {
  /* flex-grow: 3; */
  /* flex-shrink: 4; */
  order: 3;
}

.sokanThree {
  /* flex-grow: 1; */
  /* cntrl+k+c */
  /* flex-shrink: 1 ; */
  order: 1;
}

نتیجه: آیتم سوم ابتدا، آیتم اول در وسط و آیتم دوم آخر نمایش داده می‌شود. این کار نشان می‌دهد که order چگونه می‌تواند ترتیب آیتم‌ها را مستقل از ترتیب HTML تغییر دهد.
نتیجه پراپرتی Order در دوره آموزشی CSS

جمع‌بندی و کاربرد عملی Flexbox

در این بخش آموزشی ابتدا با مفهوم مقدار flex برای ویژگی display آشنا شده و دانستید که مقدار flex (که مخفف flexible و به معنای انعطاف‌پذیر است)، به ما کمک می‌کند که عناصر مختلف را به صورت بهینه، نمایش دهیم.

یادگرفتید که با مقدارهی flex به display برای کلاس والد، می‌توانید به ویژگی‌های جدیدی دسترسی پیدا کنید که امکان طراحی و چیدمان بهتر عناصر را فراهم می‌کنند:

flex-basis : طول اولیه‌ی هر یک از عناصر (آیتم‌های) انعطاف پذیر (flexible) را مشخص می‌کند.
flex-direction : جهت قرار گیری عناصر را مشخص می‌کند.
flex-wrap : مشخص می‌کند که آیا عناصر با هم بسته‌بندی شوند یا خیر.
flex-flow : ترکیبی از flex-direction و flex-wrap که می‌توان به جای آنها استفاده کرد.
flex-grow : مشخص می‌کند که یک عنصر نسبت به بقیه عناصر چه قدر بزرگ‌تر شود یا رشد کند.
flex-shrink : مشخص می‌کند که یک عنصر نسبت به بقیه عناصر چه قدر کوچک‌تر شود یا رشد کند.

بنابراین با استفاده از این ویژگی‌ها می‌توانید:

چیدمان آیتم‌ها را به صورت افقی و عمودی کنترل کنیم.
اندازه و نسبت آیتم‌ها را در فضای کانتینر مدیریت کنیم.
ترتیب نمایش آیتم‌ها را به دلخواه تغییر دهیم.

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

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

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

Flexbox - فلکس‌باکس | بخش اول