CloseTag | الشروحات | Bootstrap | نظام flexbox الصندوق المرن في BootStrap | Bootstrap Flex

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

<style>
::-webkit-scrollbar 
    {
        width: 7px;
        height: 7px;
    }
    ::-webkit-scrollbar-track 
    {
        background: #fff;
    }
    ::-webkit-scrollbar-thumb 
    {
        border-radius: 5px;
        background: #2f45ff;
    }
</style>
</head>
<body> 

<div class="table-responsive">
<div class="container mt-3">

<br><br><br>
<p class="align-content-start flexya">.align-content-start (default):</p>
<div class="d-flex flex-wrap align-content-start bg-light flexya" xid="align-content-start" style="height:300px">
<div class="p-2 border">Flex item 1</div>
<div class="p-2 border">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
<div class="p-2 border">Flex item 4</div>
<div class="p-2 border">Flex item 5</div>
<div class="p-2 border">Flex item 6</div>
<div class="p-2 border">Flex item 7</div>
<div class="p-2 border">Flex item 8</div>
<div class="p-2 border">Flex item 9</div>
<div class="p-2 border">Flex item 10</div>
<div class="p-2 border">Flex item 11</div>
<div class="p-2 border">Flex item 12</div>
<div class="p-2 border">Flex item 13 </div>
<div class="p-2 border">Flex item 14</div>
<div class="p-2 border">Flex item 15</div>
<div class="p-2 border">Flex item 16</div>
<div class="p-2 border">Flex item 17</div>
<div class="p-2 border">Flex item 18</div>
<div class="p-2 border">Flex item 19</div>
<div class="p-2 border">Flex item 20</div>
<div class="p-2 border">Flex item 21</div>
<div class="p-2 border">Flex item 22</div>
<div class="p-2 border">Flex item 23</div>
<div class="p-2 border">Flex item 24</div>
<div class="p-2 border">Flex item 25</div>
</div>
</div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>
  </body>
</html>

PCFkb2N0eXBlIGh0bWw+DQo8aHRtbCBsYW5nPSJlbiI+DQogIDxoZWFkPg0KICAgIDxtZXRhIGNoYXJzZXQ9InV0Zi04Ij4NCiAgICA8bWV0YSBuYW1lPSJ2aWV3cG9ydCIgY29udGVudD0id2lkdGg9ZGV2aWNlLXdpZHRoLCBpbml0aWFsLXNjYWxlPTEiPg0KICAgIDx0aXRsZT5Cb290c3RyYXAgZGVtbzwvdGl0bGU+DQogICAgPGxpbmsgaHJlZj0iaHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9ib290c3RyYXBANS4yLjAvZGlzdC9jc3MvYm9vdHN0cmFwLm1pbi5jc3MiIHJlbD0ic3R5bGVzaGVldCIgaW50ZWdyaXR5PSJzaGEzODQtZ0gyeUlKcUtkTkhQRXEwbjRNcWEvSEdLSWhTa0lIZUw1QXloa1lWOGk1OVU1QVI2Y3NCdkFwSEhObC92STFCeCIgY3Jvc3NvcmlnaW49ImFub255bW91cyI+DQoNCjxzdHlsZT4NCjo6LXdlYmtpdC1zY3JvbGxiYXIgDQogICAgew0KICAgICAgICB3aWR0aDogN3B4Ow0KICAgICAgICBoZWlnaHQ6IDdweDsNCiAgICB9DQogICAgOjotd2Via2l0LXNjcm9sbGJhci10cmFjayANCiAgICB7DQogICAgICAgIGJhY2tncm91bmQ6ICNmZmY7DQogICAgfQ0KICAgIDo6LXdlYmtpdC1zY3JvbGxiYXItdGh1bWIgDQogICAgew0KICAgICAgICBib3JkZXItcmFkaXVzOiA1cHg7DQogICAgICAgIGJhY2tncm91bmQ6ICMyZjQ1ZmY7DQogICAgfQ0KPC9zdHlsZT4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+IDo6LXdlYmtpdC1zY3JvbGxiYXJ7d2lkdGg6N3B4O2hlaWdodDo3cHg7fTo6LXdlYmtpdC1zY3JvbGxiYXItdHJhY2t7YmFja2dyb3VuZDojZmZmO306Oi13ZWJraXQtc2Nyb2xsYmFyLXRodW1ie2JvcmRlci1yYWRpdXM6NXB4O2JhY2tncm91bmQ6IzJmNDVmZjt9PC9zdHlsZT48L2hlYWQ+DQo8Ym9keT4gDQoNCjxkaXYgY2xhc3M9InRhYmxlLXJlc3BvbnNpdmUiPg0KPGRpdiBjbGFzcz0iY29udGFpbmVyIG10LTMiPg0KDQo8YnI+PGJyPjxicj4NCjxwIGNsYXNzPSJhbGlnbi1jb250ZW50LXN0YXJ0IGZsZXh5YSI+LmFsaWduLWNvbnRlbnQtc3RhcnQgKGRlZmF1bHQpOjwvcD4NCjxkaXYgY2xhc3M9ImQtZmxleCBmbGV4LXdyYXAgYWxpZ24tY29udGVudC1zdGFydCBiZy1saWdodCBmbGV4eWEiIHhpZD0iYWxpZ24tY29udGVudC1zdGFydCIgc3R5bGU9ImhlaWdodDozMDBweCI+DQo8ZGl2IGNsYXNzPSJwLTIgYm9yZGVyIj5GbGV4IGl0ZW0gMTwvZGl2Pg0KPGRpdiBjbGFzcz0icC0yIGJvcmRlciI+RmxleCBpdGVtIDI8L2Rpdj4NCjxkaXYgY2xhc3M9InAtMiBib3JkZXIiPkZsZXggaXRlbSAzPC9kaXY+DQo8ZGl2IGNsYXNzPSJwLTIgYm9yZGVyIj5GbGV4IGl0ZW0gNDwvZGl2Pg0KPGRpdiBjbGFzcz0icC0yIGJvcmRlciI+RmxleCBpdGVtIDU8L2Rpdj4NCjxkaXYgY2xhc3M9InAtMiBib3JkZXIiPkZsZXggaXRlbSA2PC9kaXY+DQo8ZGl2IGNsYXNzPSJwLTIgYm9yZGVyIj5GbGV4IGl0ZW0gNzwvZGl2Pg0KPGRpdiBjbGFzcz0icC0yIGJvcmRlciI+RmxleCBpdGVtIDg8L2Rpdj4NCjxkaXYgY2xhc3M9InAtMiBib3JkZXIiPkZsZXggaXRlbSA5PC9kaXY+DQo8ZGl2IGNsYXNzPSJwLTIgYm9yZGVyIj5GbGV4IGl0ZW0gMTA8L2Rpdj4NCjxkaXYgY2xhc3M9InAtMiBib3JkZXIiPkZsZXggaXRlbSAxMTwvZGl2Pg0KPGRpdiBjbGFzcz0icC0yIGJvcmRlciI+RmxleCBpdGVtIDEyPC9kaXY+DQo8ZGl2IGNsYXNzPSJwLTIgYm9yZGVyIj5GbGV4IGl0ZW0gMTMgPC9kaXY+DQo8ZGl2IGNsYXNzPSJwLTIgYm9yZGVyIj5GbGV4IGl0ZW0gMTQ8L2Rpdj4NCjxkaXYgY2xhc3M9InAtMiBib3JkZXIiPkZsZXggaXRlbSAxNTwvZGl2Pg0KPGRpdiBjbGFzcz0icC0yIGJvcmRlciI+RmxleCBpdGVtIDE2PC9kaXY+DQo8ZGl2IGNsYXNzPSJwLTIgYm9yZGVyIj5GbGV4IGl0ZW0gMTc8L2Rpdj4NCjxkaXYgY2xhc3M9InAtMiBib3JkZXIiPkZsZXggaXRlbSAxODwvZGl2Pg0KPGRpdiBjbGFzcz0icC0yIGJvcmRlciI+RmxleCBpdGVtIDE5PC9kaXY+DQo8ZGl2IGNsYXNzPSJwLTIgYm9yZGVyIj5GbGV4IGl0ZW0gMjA8L2Rpdj4NCjxkaXYgY2xhc3M9InAtMiBib3JkZXIiPkZsZXggaXRlbSAyMTwvZGl2Pg0KPGRpdiBjbGFzcz0icC0yIGJvcmRlciI+RmxleCBpdGVtIDIyPC9kaXY+DQo8ZGl2IGNsYXNzPSJwLTIgYm9yZGVyIj5GbGV4IGl0ZW0gMjM8L2Rpdj4NCjxkaXYgY2xhc3M9InAtMiBib3JkZXIiPkZsZXggaXRlbSAyNDwvZGl2Pg0KPGRpdiBjbGFzcz0icC0yIGJvcmRlciI+RmxleCBpdGVtIDI1PC9kaXY+DQo8L2Rpdj4NCjwvZGl2Pg0KICA8c2NyaXB0IHNyYz0iaHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9ib290c3RyYXBANS4yLjAvZGlzdC9qcy9ib290c3RyYXAuYnVuZGxlLm1pbi5qcyIgaW50ZWdyaXR5PSJzaGEzODQtQTNySkQ4NTZLb3dTYjdkd2xaZFlFa08zOUdhZ2k3dklzRjBqclJBb1FtREtLdFFCSFV1TFo5QXNTdjRqRDRYYSIgY3Jvc3NvcmlnaW49ImFub255bW91cyI+PC9zY3JpcHQ+DQogIDxzY3JpcHQgc3JjPSJodHRwczovL2Nkbi5qc2RlbGl2ci5uZXQvbnBtL0Bwb3BwZXJqcy9jb3JlQDIuMTEuNS9kaXN0L3VtZC9wb3BwZXIubWluLmpzIiBpbnRlZ3JpdHk9InNoYTM4NC1YZSs4Y0w5b0phNnROL3ZlQ2hTUDdxK21uU1BhajVCY3U5bVBYNUY1eElHRTBEVml0dGFxVDVsb3JmMEVJN1ZrIiBjcm9zc29yaWdpbj0iYW5vbnltb3VzIj48L3NjcmlwdD4NCiAgPHNjcmlwdCBzcmM9Imh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9ucG0vYm9vdHN0cmFwQDUuMi4wL2Rpc3QvanMvYm9vdHN0cmFwLm1pbi5qcyIgaW50ZWdyaXR5PSJzaGEzODQtT0RtRElWek4rcEZkZXh4SEVIRkJRSDMvOS92UTl1b3JpNDV6NEpqbkZzUnlkYm1RYm1MNXQxdFEwY3VsVXp5SyIgY3Jvc3NvcmlnaW49ImFub255bW91cyI+PC9zY3JpcHQ+DQogIDwvYm9keT4NCjwvaHRtbD4=