info@amertejarat.com 09124352456 @amertejarat @amertejarat amer-tejaratkhalijfars amertejaratkhalijfars

فلکس باکس





عنصر نگهدارنده container

عنصر داخلی flex-item

html

css

برای تعیین یک نگهدارنده از نوع  flexbox باید display را از نوع flex قرار بدهیم .


.flex-container
{
  display : flex;
}

display مقدار دیگری هم می گیرد و آن inline-flex می باشد.کار این نوع شبیه flex است تفاوتش در اینه که عنصر نگهدارنده خاصیت inline بگیره.

ویژگی flex-direction را از نوع row تعریف کنیم


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

فلکسباکس

حال اگر بخواهیم چیدمانی عمودی داشته باشند کافی است flex-direction را از نوع column تعریف کنیم.

دو مقدار دیگری که flex-direction می گیرد row-reverse و column-reverse می باشند ترتیب قرار گرفتن عنصرها به صورت عمودی بالعکس یا افقی بالعکس نمایش داده میشه مقدار پیشفرض برای این ویژگی row است.

  • row: در ltr از چپ به راست, و در rtl از راست به چپ
  • row-reverse: در ltr از راست به چپ, و در rtl از چپ به راست

flex-wrap   وقتی مجموع اندازه عنصرهای داخلی بیشتر از اندازه عنصر نگهدارنده بشه  به وسیله این ویژگی می توان کنترلش کرد که عنصرها به خط بعد بروند یا در همان خط بمانند.

سی اس اس

که مقادیراین ویژگی به شرح زیر است:

  • wrap: وقتی از این استفاده میشه  عنصرها به خط بعد میروند
  • nowrap: تحت همه شرایط تمام عنصرها در یک خط باقی بمانند.
  • wrap-reverse: با این  ویزگی  عنصرهایی که در عنصر نگهدارنده جای نمی گیرند در همان خط میمانند  

.flex-container
{
  flex-wrap: wrap;
}

دو ویژگی را به صورت کوتاه شده در یک ویژگی flex-flow 


.flex-container
{
  flex-flow: row wrap;
}

 

برای ادامه آموزش کلیک کنید ...


فلکس باکس