طراحی سایت و طراحی وب سایت حرفه ای را با گروه سایت سازان تجربه کنید !
02188471521 –– 02140881038 –– 09120199386

معرفی و آموزش Flexbox

معرفی و آموزش Flexbox

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

اما چرا این خاطره را برای شما یاد آوری کردم؟ این مثال مفهوم بحث بسیار مهمی در CSS3  یعنی جعبه های منعطف را بیان می کند که در جلسه سیزدهم آموزش CSS در مورد آن صحبت شد و در این پست می خواهم به چند سوال شما عزیزان پاسخ دهم. پس تا انتهای مقاله همراه من باشید.

flexbox چیست؟

جعبه منعطف یا flexbox ویژگی است برای نمایش المان ها که در CSS3 معرفی شد. اگر که شما با لیست ها ( ol و ul ) و آیتم های آن ( یعنی li ) آشنا باشید، می دانید که یک لیست ( یعنی ul ) شامل چند li می باشد که در واقع این li ها فرزندان لیست می باشند. جعبه منعطف هم دقیقا به همین شکل است. یعنی یک المان ( معمولا دیو  ) می تواند فرزندانی را در بر داشته باشد که به این فرزندان flex item می گوییم.

اما بیایید کمی بیشتر در مورد این شباهت صحبت کنیم. می دانید که یک لیست نامرتب ساختاری به شکل زیر دارد:

<ul>

  <li>list item</li>

  <li>list item</li>

</ul>

یعنی ul دربرگیرنده ی li هاست. حال احتمالا حدس می زنید که یک جعبه منعطف به صورت زیر فرزندان خود را در بر می گیرد.

<div class=”your-class”>

 <div>flex item</div>

 <div>flex item</div>

</div>

نکته مهمی که در اینجا باید باید به آن اشاره کنم این است که flex item ها الزاما یک نوع نیستند. یعنی در یک جعبه منعطف همزمان یک دیو، عکس، لیست، span و … می تواند قرار بگیرد. سوال مهم دیگری که در اینجا مطرح می شود این است که:

چه موقع و چرا از  flexbox به جای float استفاده می کنیم؟

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

مهم ترین دلیلی که امروزه از flexbox به جای float استفاده می شود، پاسخ گویی این ویژگی به نیاز های طراحان وب برای طراحی واکنش گرا صفحات وب می باشد.

Flexbox قابلیتی که به ما می دهد این است که متناسب با مدیا کوئری خاص، می توانیم ترتیب و تراز المان ها را تغییر دهیم و در نتیجه به بهترین شکل المان ها را در پلتفرم های مختلف نمایش دهیم.

Flexbox چگونه کار می کند؟

برای درک نحوه کارکرد جعبه های منعطف لازم است که با ساختار آن آشنا باشید. در ساختار هر جعبه منعطف یک المان دربرگیرنده ( flex container ) داریم که چند المان دیگر ( flex item ) را در خود جای می دهد. در ادامه به تشریح این این ساختار می پردازیم و با آن آشنا می شویم.

Flex container

طرح بندی flex به المان دربرگیرنده ( container ) این قابلیت را می دهد که به فرزندان خود دستور دهد تا از فضای موجود بهترین استفاده را بکنند و ارتفاع و عرض خود را برای نمایش هرچه بهتر تغییر دهند.

این المان دو محور main و cross دارد. محور cross همیشه عمود بر محور main می باشد و جهت آن به جهت main وابسته است. به تصویر زیر توجه نمایید:

معرفی و آموزش Flexbox

مطابق با تصویر بالا، زمانی که جهت flex را ستون ( column ) تنظیم کنید، محور main عمودی و محور cross افقی خواهد بود. تمام حالت های مختلف محور ها را می توانید در تصویر بالا مشاهده نمایید. پس با استفاده از این دو محور، المان دربرگیرنده، به آیتم ها دستور می دهد که چگونه در کنار هم قرار بگیرند. اما گفتیم که درون المان دربرگیرنده flex item ها قرار می گیرند و حالا باید در مورد این آیتم ها صحبت کنیم.

Flex Item

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

معرفی و آموزش Flexbox

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

چگونه flexbox را فعال و از آن استفاده کنیم؟

در بخش HTML کدهای زیر را می نویسیم:

<div class=”your-class”>

 <div>flex item</div>

 <div>flex item</div>

</div>

حال به سراغ فایل CSS می رویم و دستورات زیر را در آن می نویسیم:

.your-class {

  display:flex;

  flex-direction:column;

}

دستور display: flex; به نحوه نمایش المان ها را به inline تغییر می دهد و دستور flex-direction جهت محور main ( مطابق تصویری که قبلتر دیدیم ) را تعیین می کند. تا اینجای کار flexbox را فعال و محور آن را تعیین کردیم. حال می توانیم رفتار آیتم ها را تعیین کنیم.

و اما بخش جذابتر داستان! چگونه سرباز ها را مدیریت کنیم؟!

در شش قدم به شما می آموزم که چگونه سرباز های تحت فرمان خود را مدیریت کنید!

قدم اول

آیا می خواهید المان دربرگیرنده شبیه به المان های بلوکی رفتار کند یا درون خطی؟ ویژگی که قدرت جعبه منعطف را دو چندان می کند این است که این المان می تواند مطابق با نیاز برنامه نویس مانند المان ها درون خطی یا بلوکی رفتار کند. این رفتار المان دربرگیرنده با صدور دستور display و مقادیر زیر تعیین می شود:

flex: با دادن این مقدار، عنصر دربرگیرنده شبیه به عناصر بلوکی رفتار می کند.

inline-flex: این مقدار نیز رفتار عنصر دربرگیرنده را به رفتاری شبیه عناصر درون خطی تغییر می دهد.

قدم دوم

می خواهید که محور  main افقی باشد یا عمودی؟رذهمانطور که پیشتر ذکر شد، ویژگی flex-direction جهت این محور را تعیین می کند و مقادیر زیر را دریافت می کند:

row: مقدار پیش فرض می باشد و جهت از چپ به راست.

row-reverse: راست به چپ.

column: بالا به پایین.

column-reverse: پایین به بالا.

قدم سوم

فضای اضافی را چگونه بین آیتم های یک ردیف تقسیم می کنید؟ برای تعیین تکلیف فضای اضافی بین آیتم ها در راستای محور main، ویژگی justify-content  را داریم. و اما مقادیر آن:

flex-start: آیتم ها را در ابتدای ردیف قرار داده و فضای اضافی را به انتهای ردیف منتقل می کند.

flex-end: آیتم ها را در انتهای ردیف قرار داده و فضای اضافی را به ابتدای ردیف منتقل می کند.

center: آیتم ها را در وسط ردیف قرار می دهد.

space-between: فضای اضافی را به طور یکساین بین آیتم ها تقسیم می کند. در این حالت آیتم اول در ابتدای ردیف و آیتم آخر در انتهای ردیف قرار می گیرد (دقیقا در لبه).

space-around: آیتم اول و آخر در لبه ردیف قرار نمی گیرند ولی فاصله آنها از لبه برابر می شود. یعنی اگر فاصله چپ اولین آیتم از لبه 5 پیکسل باشد، فاصله راست آخرین آیتم از لبه نیز همین 5 پیکسل است و الزاما فاصله بین سایر آیتم ها یکسان نیست.

space-evenly: این دستور فاصله اضافی را به طور کاملا یکسان بین آیتم تقسیم می کند.

قدم چهارم

فاصله اضافی بین ردیف ها در راستای محور cross  را چگونه مدیریت می کنید؟ برای این کار از دستور align-content استفاده می کنیم:

flex-start: ردیف ها را در ابتدای ستون قرار می دهد و فاصله اضافی را به انتها آن منتقل می کند.

flex-end: ردیف ها را در انتهای ستون قرار می دهد و فاصله اضافی را به ابتدای آن منتقل می کند.

center: آیتم ها در وسط ستون قرار می گیرند.

space-between: این دستور اولین ردیف را در ابتدای دربرگیرنده و آخرین ریف را در انتهای آن قرار می دهد و فضای باقی مانده را بین سایر ردیف ها تقسیم می کند.

space-around: این دستور فاصله اولین ردیف را از لبه بالای در برگیرنده و فاصله آخرین ردیف از انتهای آن را به مقدار یکسانی تغییر می دهد. در این حالت نیز فاصله بین ردیف ها الزاما یکسان نیست.

stretch: ردیف ها را به اندازه ای کش می دهد که المان در برگیرنده را کاملا پر کنند. این مقدار، پیش فرض می باشد.

قدم پنجم

آیا می توان فاصله بین آیتم ها در راستای محور cross را مدیریت کرد؟ بله! با استفاده از دستور align-items به راحتی می توانیم این کار را انجام دهیم:

flex-start: آیتم ها در ابتدای محور cross قرار می گیرند.

flex-end: آیتم ها در انتهای محور cross قرار می گیرند.

center: آیتم ها در وسط محور cross قرا می گیرند.

baseline: آیتم ها را بر اساس خط تراز محتوای درون آنها در کنار هم قرار می دهد.

stretch: آیتم ها به اندازه ای کش می یابند که المان در برگیرده را پر کنند. این مقدار پیش فرض می باشد.

قدم ششم

اگر اندازه عرض آیتم ها به گونه ای بود که با عرض دربرگیرنده تناسب نداشت، تکلیف چیست؟ آیا می توان خطوط جدیدی را ایجاد کرد؟ در این جاست که دستور flex-wrap مشکل ما را رفع می کند:

nowrap: تمام آیتم ها سعی می کنند که در یک ردیف قرار بگیرند. این مقدار پیش فرض می باشد.

wrap: اگر فضای یک ردیف برای جای گرفتن تمام آیتم ها یکسان نبود، خط (خطوط) جدید (زیر خط مورد نظر) ایجاد می شوند و آیتم های اضافی به این خطوط منتقل می شوند.

wrap-reverse: خط (خطوط) جدید در بالای خط مورد نظر برای جای دادن آیتم ها ایجاد می شود.

دو ویژگی flex-direction و flex-wrap را می توان به صورت خلاصه شده در یک دستور و به صورت زیر نوشت:

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

مثلا می توانیم دستور زیر را بنویسیم:

flex-flow: column-reverse wrap-reverse;

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

چگونه می توان جایگاه یک آیتم خاص را تغییر داد؟

به طور پیش فرض آیتم ها به ترتیبی که در کدهای HTML ایجاد شده اند، در یک ردیف قرار می گیرند. برای تغییر مکان یک آیتم، از ویژگی order برای آن استفاده می کنیم. این ویژگی یک مقدار عددی را می پذیرد.

چگونه می توان عرض آیتم ها را افزایش داد؟

برای این کار از ویژگی flex-grow استفاده می کنیم و می توانیم به راحتی میزان رشد آیتم ها را مدیریت کنیم. این ویژگی نیز مقداری عددی را می پذیرد که 0 عدد پیش فرض می باشد.

چگونه عرض آیتم ها را کاهش دهیم؟

ویژگی flex-shrink را می توان برای کاهش عرض آیتم ها به کار برد. مقدار پیش فرض این ویژگی عدد 1 می باشد.

چگونه با استفاده از بوت استرپ 4 می توان جعبه منعطف را به صورت رسپانسیو طراحی کرد؟

فرض کنید 3 آیتم داریم و می خواهیم نحوه چینش این آیتم ها زمانی که کاربر با موبایل و در وضعیت عمودی، صفحه را بازدید می کند، آیتم سوم در ابتدای ردیف قرا بگیرد و آیتم های بعدی به ترتیب بعد از آن. یعنی به ترتیب 3 ، 1 و 2. می توانیم این کار را با استفاده از مدیاکوئری هم انجام دهیم بدین ترتیب که دستورات زیر را برای عرض مثلا 575 پیکسل می نویسیم:

@media (min-width: 575px) {

  .rogue-flex-item  {

    order:3;

  }

}

اما چون بوت استرپ دستورات از پیش تعیین شده ای دارد، کار ما را راحت تر می کند. بنابراین با دادن کلاس معنی به آیتم ها، به راحتی می توانیم بدون نوشتن هیچ CSS اضافه ای، به هدفمان دست یابیم:

<div class=”d-flex flex-row justify-content-start flex-wrap”>

  <div class=”order-sm-3″>Item 3 </div>

  <div class=”order-sm-1″> Item 1 </div>

  <div class=”order-sm-2″> Item 2 </div>

</div>

نکته ای که باید به آن توجه داشته باشید باگ های بوت استرپ می باشد. توصیه من به شما این است به صورت دستی هیچ کدام از دستورات بوت استرپ را خنثی نکنید چرا که این فرمورل دائما در حال تغییر برای رفع باگ ها می باشد. پس بدون نگرانی می توانید از آن استفاده کنید.

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

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

دیدگاه ‏خود را بنویسید