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

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

در خدمت شما عزیزان هستیم با آموزش جامع و کامل Flexible Box – آموزش Justify-content که پس از ۳ قسمت آموزشی

  1. آموزش جامع و کامل Flexible Box – آموزش Flex-direction
  2. آموزش جامع و کامل Flexible Box – آموزش Flex-wrap
  3. آموزش جامع و کامل Flexible Box – آموزش Flex-flow

منشتر می شود ، با ما همراه باشید با آموزش ویژگی Justify-content .

 

ویژگی Justify-content :

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

این ویژگی ۵ مقدار را قبول میکند با نام های :

  1. Center
  2. Flex-start
  3. Flex-end
  4. Space-around
  5. Space-between

 

مقدار Center :

این مقدار آیتم هارا در وسط و بدون دخالت محیط های اضافی اطراف میچیند .

مثال :


flex-contaeiner {
display:flex:
justify-content: center;
}

۱
۲
۳
۴

 

مقدار Flex-start :

این مقدار آیتم هارا از شروع خط آغاز به چیدن میکند و تا جایی که آیتم وحود داشته باشد میچیند ، این مقدار ، حالت پیشفرض این ویژگی نیز میباشد

مثال :


flex-contaeiner {
display:flex:
justify-content: Flex-start;
}

۱
۲
۳
۴

 

مقدار Flex-end :

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

مثال :


flex-contaeiner {
display:flex:
justify-content: Flex-end;
}

۱
۲
۳
۴

 

مقدار Space-around :

این مقدار قبل و بعد از آیتم ها مقداری فضا را در نظر میگیرد و بطور منظم و بدون از بین بردن نظم و چیدمان آنها را در یک سطر کاملا مرتب میچیند .

مثال :


flex-contaeiner {
display:flex:
justify-content: Space-around;
}

۱
۲
۳

 

مقدار Space-between :

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

مثال :


flex-contaeiner {
display:flex:
justify-content: Space-between;
}

۱
۲
۳

 

امیدوارم از این جلسه آموزش فلکس باکس در آیم سئو نیز لذت برده باشید

تاریخ انتشار : ۰۲ بهمن