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">
      </head>
      <body>

        <!-- me-auto -->
        <div class="d-flex text-white mb-3 py-3 bg-secondary">
          <div class="p-2 me-auto bg-primary">Flex Item</div>
          <div class="p-2 bg-primary">Flex Item</div>
          <div class="p-2 bg-primary">Flex item</div>
        </div>

        <!-- ms-auto -->
        <div class="d-flex text-white mb-3 py-3 bg-secondary">
          <div class="p-2 bg-primary">Flex item</div>
          <div class="p-2 bg-primary">Flex item</div>
          <div class="p-2 ms-auto bg-primary">Flex item</div>
        </div>
        <div class="d-flex align-items-start flex-column mb-3 py-3 bg-secondary text-white" style="height: 200px;">
          <div class="mb-auto p-2 bg-primary">Flex item</div>
          <div class="p-2 bg-primary">Flex item</div>
          <div class="p-2 bg-primary">Flex item</div>
        </div>
        
        <div class="d-flex align-items-end flex-column mb-3 py-3 bg-secondary text-white" style="height: 200px;">
          <div class="p-2 bg-primary">Flex item</div>
          <div class="p-2 bg-primary">Flex item</div>
          <div class="mt-auto p-2 bg-primary">Flex item</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+DQogICAgPGh0bWwgbGFuZz0iZW4iPg0KICAgICAgPGhlYWQ+DQogICAgICAgIDxtZXRhIGNoYXJzZXQ9InV0Zi04Ij4NCiAgICAgICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xIj4NCiAgICAgICAgPHRpdGxlPkJvb3RzdHJhcCBkZW1vPC90aXRsZT4NCiAgICAgICAgPGxpbmsgaHJlZj0iaHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9ib290c3RyYXBANS4yLjAvZGlzdC9jc3MvYm9vdHN0cmFwLm1pbi5jc3MiIHJlbD0ic3R5bGVzaGVldCIgaW50ZWdyaXR5PSJzaGEzODQtZ0gyeUlKcUtkTkhQRXEwbjRNcWEvSEdLSWhTa0lIZUw1QXloa1lWOGk1OVU1QVI2Y3NCdkFwSEhObC92STFCeCIgY3Jvc3NvcmlnaW49ImFub255bW91cyI+DQogICAgICA8c3R5bGUgdHlwZT0idGV4dC9jc3MiPiA6Oi13ZWJraXQtc2Nyb2xsYmFye3dpZHRoOjdweDtoZWlnaHQ6N3B4O306Oi13ZWJraXQtc2Nyb2xsYmFyLXRyYWNre2JhY2tncm91bmQ6I2ZmZjt9Ojotd2Via2l0LXNjcm9sbGJhci10aHVtYntib3JkZXItcmFkaXVzOjVweDtiYWNrZ3JvdW5kOiMyZjQ1ZmY7fTwvc3R5bGU+PC9oZWFkPg0KICAgICAgPGJvZHk+DQoNCiAgICAgICAgPCEtLSBtZS1hdXRvIC0tPg0KICAgICAgICA8ZGl2IGNsYXNzPSJkLWZsZXggdGV4dC13aGl0ZSBtYi0zIHB5LTMgYmctc2Vjb25kYXJ5Ij4NCiAgICAgICAgICA8ZGl2IGNsYXNzPSJwLTIgbWUtYXV0byBiZy1wcmltYXJ5Ij5GbGV4IEl0ZW08L2Rpdj4NCiAgICAgICAgICA8ZGl2IGNsYXNzPSJwLTIgYmctcHJpbWFyeSI+RmxleCBJdGVtPC9kaXY+DQogICAgICAgICAgPGRpdiBjbGFzcz0icC0yIGJnLXByaW1hcnkiPkZsZXggaXRlbTwvZGl2Pg0KICAgICAgICA8L2Rpdj4NCg0KICAgICAgICA8IS0tIG1zLWF1dG8gLS0+DQogICAgICAgIDxkaXYgY2xhc3M9ImQtZmxleCB0ZXh0LXdoaXRlIG1iLTMgcHktMyBiZy1zZWNvbmRhcnkiPg0KICAgICAgICAgIDxkaXYgY2xhc3M9InAtMiBiZy1wcmltYXJ5Ij5GbGV4IGl0ZW08L2Rpdj4NCiAgICAgICAgICA8ZGl2IGNsYXNzPSJwLTIgYmctcHJpbWFyeSI+RmxleCBpdGVtPC9kaXY+DQogICAgICAgICAgPGRpdiBjbGFzcz0icC0yIG1zLWF1dG8gYmctcHJpbWFyeSI+RmxleCBpdGVtPC9kaXY+DQogICAgICAgIDwvZGl2Pg0KICAgICAgICA8ZGl2IGNsYXNzPSJkLWZsZXggYWxpZ24taXRlbXMtc3RhcnQgZmxleC1jb2x1bW4gbWItMyBweS0zIGJnLXNlY29uZGFyeSB0ZXh0LXdoaXRlIiBzdHlsZT0iaGVpZ2h0OiAyMDBweDsiPg0KICAgICAgICAgIDxkaXYgY2xhc3M9Im1iLWF1dG8gcC0yIGJnLXByaW1hcnkiPkZsZXggaXRlbTwvZGl2Pg0KICAgICAgICAgIDxkaXYgY2xhc3M9InAtMiBiZy1wcmltYXJ5Ij5GbGV4IGl0ZW08L2Rpdj4NCiAgICAgICAgICA8ZGl2IGNsYXNzPSJwLTIgYmctcHJpbWFyeSI+RmxleCBpdGVtPC9kaXY+DQogICAgICAgIDwvZGl2Pg0KICAgICAgICANCiAgICAgICAgPGRpdiBjbGFzcz0iZC1mbGV4IGFsaWduLWl0ZW1zLWVuZCBmbGV4LWNvbHVtbiBtYi0zIHB5LTMgYmctc2Vjb25kYXJ5IHRleHQtd2hpdGUiIHN0eWxlPSJoZWlnaHQ6IDIwMHB4OyI+DQogICAgICAgICAgPGRpdiBjbGFzcz0icC0yIGJnLXByaW1hcnkiPkZsZXggaXRlbTwvZGl2Pg0KICAgICAgICAgIDxkaXYgY2xhc3M9InAtMiBiZy1wcmltYXJ5Ij5GbGV4IGl0ZW08L2Rpdj4NCiAgICAgICAgICA8ZGl2IGNsYXNzPSJtdC1hdXRvIHAtMiBiZy1wcmltYXJ5Ij5GbGV4IGl0ZW08L2Rpdj4NCiAgICAgICAgPC9kaXY+DQoNCg0KDQoNCiAgICAgIDxzY3JpcHQgc3JjPSJodHRwczovL2Nkbi5qc2RlbGl2ci5uZXQvbnBtL2Jvb3RzdHJhcEA1LjIuMC9kaXN0L2pzL2Jvb3RzdHJhcC5idW5kbGUubWluLmpzIiBpbnRlZ3JpdHk9InNoYTM4NC1BM3JKRDg1Nktvd1NiN2R3bFpkWUVrTzM5R2FnaTd2SXNGMGpyUkFvUW1ES0t0UUJIVXVMWjlBc1N2NGpENFhhIiBjcm9zc29yaWdpbj0iYW5vbnltb3VzIj48L3NjcmlwdD4NCiAgICAgIDxzY3JpcHQgc3JjPSJodHRwczovL2Nkbi5qc2RlbGl2ci5uZXQvbnBtL0Bwb3BwZXJqcy9jb3JlQDIuMTEuNS9kaXN0L3VtZC9wb3BwZXIubWluLmpzIiBpbnRlZ3JpdHk9InNoYTM4NC1YZSs4Y0w5b0phNnROL3ZlQ2hTUDdxK21uU1BhajVCY3U5bVBYNUY1eElHRTBEVml0dGFxVDVsb3JmMEVJN1ZrIiBjcm9zc29yaWdpbj0iYW5vbnltb3VzIj48L3NjcmlwdD4NCiAgICAgIDxzY3JpcHQgc3JjPSJodHRwczovL2Nkbi5qc2RlbGl2ci5uZXQvbnBtL2Jvb3RzdHJhcEA1LjIuMC9kaXN0L2pzL2Jvb3RzdHJhcC5taW4uanMiIGludGVncml0eT0ic2hhMzg0LU9EbURJVnpOK3BGZGV4eEhFSEZCUUgzLzkvdlE5dW9yaTQ1ejRKam5Gc1J5ZGJtUWJtTDV0MXRRMGN1bFV6eUsiIGNyb3Nzb3JpZ2luPSJhbm9ueW1vdXMiPjwvc2NyaXB0Pg0KICAgICAgPC9ib2R5Pg0KICAgIDwvaHRtbD4=