در صفحه بندی بوت استرپ وقتی یک سری ایجاد میخواد و المان های مورد نظر در آن قرار میگیرد بوت استرپ به صورت پیشفرض اینطور تعریف کرده است که تمام المان ها را در همان سطر ایجاد کند و به سطر بعدی نرود و این باعث میشود اگر تعداد المان ها زیاد باشد و اگر بخواهد همه را در خود جای دهد باعث میشود تا از حد استاندارد خود خارج شود.(به صورت پیشفرض کلاس flex-nowrap اعمال شده است)
حال اگر بخواهیم شکستگی ایجاد کنیم و آن سطر حداقل مقدار خود را به خود بگیرد و ادامه آن به سطر بعدی ادامه پیدا کند از کلاس flex-wrap استفاده میکنیم.
nowrap:
<div class="d-flex justify-content-start flex-nowrap bg-secondary">
<div class="bg-danger"></div>
<div class="bg-warning"></div>
<div class="bg-info"></div>
<div class="bg-primary"></div>
<div class="bg-danger"></div>
<div class="bg-warning"></div>
<div class="bg-info"></div>
<div class="bg-primary"></div>
<div class="bg-danger"></div>
</div>
نتیجه:
همان طور که مشاهده میشود چون بدون کلاس wrap است و چون تعداد از فضای مورد نظر بیشتر است از محیط اصلی خارج شده و استاندارد را بهم ریخته است
حال با اعمال کلاس wrap داریم :
<div class="d-flex justify-content-start flex-wrap bg-secondary">
با اعمال کلاس wrap تا جایی که امکان داشت در آن سطر المان ها قرار گرفتند و بقیه آن ها به سطر بعدی منتقل شدند
هنگامی که شکستگی در سطر ایجاد میشود اگر بخواهیم سطر ها را با هم جابجا کنیم از کلاس flex-wrap-reverse استفاده میکنیم , مثلا داشته باشیم سطر1 و سطر 2 بعد از اعمال این کلاس داریم سطر2 و سطر 1
<div class="d-flex justify-content-start flex-wrap-reverse bg-secondary">
<div class="bg-primary"></div>
<div class="bg-danger"></div>
<div class="bg-danger"></div>
<div class="bg-warning"></div>
<div class="bg-info"></div>
<div class="bg-primary"></div>
<div class="bg-danger"></div>
<div class="bg-warning"></div>
<div class="bg-info"></div>
نتیجه کد :
جای سطرها با یکدیگر جابجا شدند.
اگر یک div برای صفحه خود در نظر بگیریم که در آن چندین div دیگر وجود داشته باشد و اگر بخواهیم کل آن div درون آن را به حرکت در بیاوریم مانند نقطه شروع , وسط , انتها و ...باید از کلاس زیر استفاده کنیم :
<div class= " d-flex flex-wrap align-content">
align-content-start : کل محتوا مورد نظر در ابتدا کادر قرار میگیرد
align-content-end : کل محتوا مورد نظر در انتها کادر قرار میگیرد
align-content-center: کل محتوا مورد نظر در وسط کادر قرار میگیرد
align-content-around : کل محتوا مورد نظر در با به وجود امدن فاصله از ابتدا و انتها قرار میگیرد
align-content-stretch کل محتوا مورد نظر به قدری کشیده میشوند که کل باکس را پر کند.
اگر بخواهیم استثنا در یکی از ایتم ها قایل شویم باید از کلاس align-self استفاده کنیم , به بیان ساده تر :همانطور که در کلاس قبلی یعنی align-content دیدیم تمامی ایتم ها به طور کلی یا در ابتدا , انتها , وسط قرار میگیرند( تاکید میکنم تمامی ایتم ها)
حالا اگر بخواهیم استثنا قایل شویم و ایتم1 را در حالت دیگر قرار دهیم داریم :
<div class= " d-flex flex-wrap align-content-end">
<div class = " align-self-start" > number 1 </div>
<div class="bg-warning"></div>
<div class="bg-info"></div>
<div class="bg-primary"></div>
ایتمی که به خود کلاس align-self-start گرفته به صورت استثنا در ابتدا و دیگری در انتها ظاهر میشوند.
