آموزش FlexBox در CSS

از
فهرست مطالب پنهان
فلکس باکس (FlexBox) چیست و چه کاربردی دارد؟
پراپرتی هایی مخصوص کانتینر
Display : flexbox
flex-direction
flex-wrap
flex-flow
justify-content
align-items
پراپرتی های مخصوص آیتم ها
align-content
order
flex-grow
flex-shrink
flex-basis
flex
align-self

فلکس باکس (FlexBox) چیست و چه کاربردی دارد؟

Flexible Box Layout قابلیت جدید CSS است که برای مرتب کردن و طرح بندی عناصر داخلی یک کانتینر کاربرد دارد، با استفاده از فلکس باکس می می توانیم مدیریت بهتری بر روی عناصر داخلی یک بخش داشته باشیم. در ادامه با جزئیات و سایر پراپرتی های فلکس باکس بیشتر آشنا خواهید شد. توی سایت CSS-Tricks در این مقاله بسیار جامع و کاملتر توضیح داده است.

سایت flexboxfroggy.com یک سایت هم که بصورت جذاب از شما آزمون های متعدد مربوط به فلکس باکس رو میگره و خیلی توصیه میشود.

پراپرتی هایی مخصوص کانتینر

Display : flexbox

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

کاربرد فلکس باکس در css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      div.container {
        display: flex;
      }
    </style>
</head>
<body>
  <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
  </div>
</body>
</html>

flex-direction

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

جهت نمایش آیتم ها در flexbox

.container {
  flex-direction: row (defalut) || row-reverse || column || column-reverse;
}

flex-wrap

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

flex-wrap

.container {
  flex-wrap: nowrap (Defalut) | wrap | wrap-reverse;
}

flex-flow

پراپرتی می تواند همزمان دو پارامتر را دریافت کنید، یکی flex-direction هست و دیگری flex=wrap ، با استفاده از پراپرتی flow دیگه نیازی نیست جداگانه جهت نمایش آیتم ها و بیرون زنگی و چیدمان آنها رو مشخص کنیم، خیلی خلاصه در یک دستور می تونیم بنویسیم: این پراپرتی به کانتینر داده میشود.

.container {
  flex-flow: row wrap;
  /* بصورت پیش فرض این حالت رو داره */
}
.container {
  flex-flow: column nowrap;
}

justify-content

توسط پراپرتی justify-content می توان وسط چین، چپ چین و راست چین کردن آیتم ها استفاده کرد. این پراپرتی ورودی های متعددی میگیره که در نمونه کد زیر اشاره شده بهش: این پراپرتی به کانتینر داده میشود.

مشاهده توضیحات بیشتر از سایت css- tricks

.container {
justify-content: flex-start {Defalut} | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}

align-items

از پراپرتی align-items می توان به وسط چین کردن محور مخالف آیتم ها استفاده میشود. این پراپرتی به کانتینر داده میشود.

  • اگر مقدار flex-direction مقدارش row باشه، مقداری align-items: center آیتم ها رو از بالا و پائین وسط چین میکنه
  • اگر مقدار flex-direction مقدارش column باشه، مقداری align-items: center آیتم ها رو از چپ و راست وسط چین میکنه

پراپرتی align-items

.container {
  align-items: flex-start | flex-end | center | baseline | stretch;

  /*
  flex-start
  آیتم ها را از استارت کانتینر چیدمان می کند
  */

  /*
  flex-end
  آیتم ها را از نقطه پایانی کانتینر چیدمان می کند
  */

  /*
  center
  آیتم ها را دقیقا در مرکز کانتینر چیدمان می کند
  */

  /*
  baseline
  آیتم ها را بر اسال محتوای داخلی در یک خط مرتب می کند و کاری به ارتفاع آیتم ندارد
  */

  /*
  stretch
  آیتم ها را از بالا و پائین بصورت کشیده و یکسان مرتب می کند.
  */
}

 

پراپرتی های مخصوص آیتم ها

align-content

این پراپرتی برای آیتم ها تنظیم می شود و چیدمان آیتم ها رو مشخص میکنه. نمونه کد زیر رو مشاهده کنید:

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

order

توسط پراپرتی order می توانیم ترتیب قرار گیری آیتم را تغییر دهیم. کافیه یه عدد بر اساس عدد مرتب سازی بهش بدیم:

.item {
  order: 5; /* default is 0 */
}

flex-grow

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

.item {
  flex-grow: 1; /* default 0 */
}

flex-shrink

این پراپرتی بر عکس flex-grow هست، فرض کنیم آیتم های ما کمی بیشتر از فضای کانتینر رو اشغال کردن و بیرون زدگی دارند، توسط flex-shrink می توانیم به نسبت مشخصی آیتم ها رو کوچک کنیم:

.item {
  flex-shrink: 2; /* default 1 */
}

flex-basis

پراپری جهت اعمال عرض به آیتم های استفاده میشود، شبیه به width هست. برای کسب اطلاعات بیشتر این لینک را مشاهده کنید.

flex

پراپرتی flex یک پراپرتی shorthand هست و در یک دستور می توان سه دستور grow – shrink  و bssis رو میگیره، به شکل زیر:

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

مقدار flex: auto بشدت پیشنهاد میشه، و بهترین حالت و پویا ترین حالت ممکن است. و در بیشتر مواقع این کاربرد دارد.

align-self

پراپرتی align-self شبیه به align-items هست، با این تفاوت که پراپرتی align-self تنها به یک آیتم داده میشود.

 

 

 

 

 

 

 

 

 

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