در شبکه بندی بوت استرپ , موقیعت ایتم ها را با flex-box مشخص کردیم و آن ها را با کلاس d-flex نمایش دادیم.
یک سری از کلاس ها در d-flex تعریف شده اند که میتوان جهات و نحوه قرار گیری آنها را در صفحه شبکه بندی بوت استرپ تعیین کرد . به کد زیر توجه کنید :
<div class = "d-flex Justify-content-start">
این کلاس به این معنا است که ایتم ها و محتواها در ابتدا سطر قرار بگیرند (start) و با همان نحوه چیدمان ظاهر شوند.
<div class = "d-flex Justify-content-end">
در این کلاس ایتم (ها) با همان ترتیب در انتها سطر قرار میگیرند.
<div class = "d-flex Justify-content-center ">
نکته مهم در اینجاست که نباید با flex-row-reverse ها اشتباه گرفته شود.
<div class = "d-flex Justify-content-between ">
در این کلاس ایتم ها به ترتیب تقسیم میشوند و با توجه به به تعدادی که دارند در آن سطر پخش میشوند. برای مثال اگر 2 ایتم وجود داشته باشد سطر به هر کدام 50% را تخصیص میدهد و آن را در سطر پخش میکند (اما با توجه به مقدار ایتم همان قدر هم باکس برایش تعریف میشود)
<div class = "d-flex Justify-content-around ">
این کلاس تقریبا همان خاصیت Justify-content-center را دارد با این تفاوت که محتوا از ابتدا و از انتها فاصله ایجاد میکند.
تمامی کد ها و مطالب گفته شده را در کد زیر داریم :
که به ترتیب نمایش آن در مرورگر به صورت زیر است :
اگر بخواهیم با توجه به محتوا درون باکس با همان اندازه به باکس خود یه فضا اختصاص دهیم و با توجه به سهمی که از آن سطر دارد میتواند بخش مورد نظر خود را اشغال کند که در اینجا از کلاس flex-fill استفاده میکنیم یعنی به طور ساده تر : با محتوا در سطر پخش میشود.
<div class="d-flex bg-secondary">
<div class="bg-danger flex-fill">test1</div>
<div class="bg-warning flex-fill">test2</div>
<div class="bg-info flex-fill">test3</div>
<div class="bg-primary flex-fill">test4</div>
</div>
نتیجه در مرورگر :
در این کلاس به المان های مورد نظر حدااکثر فضا را میتوان به صورت اختصاص , تخصیص داد
مثلا میخواهیم ایتم اخر کل را پر کند داریم :
<div class = " flex-grow-1 "> tets 1 </div>
در اینجا test1 حداکثر فضا که میتواند بگیرد را به خود اختصاص میدهد .
اولیت ها ( order ) :
اگر چندین ایتم در صفحه و در یک div قرار داشته باشد و بخواهیم به آنها اولویت چیدمان بدهیم باید از کلاسی به نام order استفاده کنیم که نشان دهیم به ترتیب کدام المان طاهر شود :
<div class = "order-3> test 1 </div>
<div class = "order-1> test 2 </div>
<div class = "order-2> test 3 </div>
نمایش کد بالا به این صورت است که : ابتدا test2 طاهر میشود چون order-1 است و سپی به ترتیب test3 با اولویت 2 و سپس test 1 با اولویت اخر یعنی 3
