آموزش جامع و کامل Flexible Box - آموزش Justify-content

آموزش جامع و کامل Flexible Box – آموزش Flex-direction

قبل از بوجود آمدن مبحث Flex Box ما برای لایه بندی و تقسیم بندی جای عناصر در وب ، از ۴ روش زیر استفاده میکردیم :

  1. عناصر Block : برای Section ها و دیگر عناصر در صفحه وب
  2. عناصر Inline : برای نوشته ها و لینک ها
  3. عناصر Table : برای داده های مرتب و گاهی ۲ بعدی
  4. عناصر Positioned : برای جای گیری عناصر در حالت های مختلف

مدل طراحی Flexible Box یک روش بسیار ساده برای طراحی و طرح بندی های ریسپانسیو میباشد که بدون استفاده از خاصیت های Float و Position کار خود را ادامه میدهد .

 

 

عناصر Flex Box :

طرح بندی فلکس باکس شامل یک عنصر پدر و یک یا چند عنصر فرزند می باشد .

۱
۱
۱

 

 

عنصر پدر فلکس باکس :

برای اینکه ویژگی فلکس باکس را به پدر و یا همان عنصر والد اضافه کنیم ، ابتدا باید خاصیت display را برابر Flex قرار دهید .


flex-contaeiner {
display:flex:
}

 

ویژگی هایی که میتوان به عنصر والد یا پدر افزود عبارتند از :

  • Flex-direction
  • Flex-wrap
  • Flex-flow
  • justify-content
  • align-items
  • align-content

 

ویزگی Flex-direction :

ویژگی flex-direction که به والد افزوده می شود ، سمت چیده شدن عناصر را تعیین میکند .مقادیر این ویژگی عبارتند از :

  1. column
  2. column-reverse
  3. row
  4. row-reverse

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

 


flex-contaeiner {
display:flex:
flex-direction : column;
}

۱
۲
۳

 

 


flex-contaeiner {
display:flex:
flex-direction : column-reverse;
}

۱
۲
۳

 

 


flex-contaeiner {
display:flex:
flex-direction : row;
}

۱
۲
۳

 

 


flex-contaeiner {
display:flex:
flex-direction : row-reverse;
}

۱
۲
۳

 

 

در قسمت های بعدی باقی ویژگی ها را به شما توضیح میدهیم .

 

آموزش جامع و کامل Flexible Box – آموزش Flex-direction

تاریخ انتشار : ۳۰ دی