പ്രധാന ഉള്ളടക്കത്തിലേക്ക് പോകുക ഡോക്സ് നാവിഗേഷനിലേക്ക് പോകുക
Check
in English

സ്റ്റാക്കുകൾ

ഘടക ലേഔട്ട് എന്നത്തേക്കാളും വേഗത്തിലും എളുപ്പത്തിലും ആക്കുന്നതിന് ഞങ്ങളുടെ ഫ്ലെക്സ്ബോക്സ് യൂട്ടിലിറ്റികളുടെ മുകളിൽ നിർമ്മിക്കുന്ന ഷോർട്ട്ഹാൻഡ് സഹായികൾ.

ബൂട്ട്‌സ്‌ട്രാപ്പിൽ വേഗത്തിലും എളുപ്പത്തിലും ലേഔട്ടുകൾ സൃഷ്‌ടിക്കാൻ നിരവധി ഫ്ലെക്‌സ്‌ബോക്‌സ് പ്രോപ്പർട്ടികൾ പ്രയോഗിക്കുന്നതിന് സ്റ്റാക്കുകൾ ഒരു കുറുക്കുവഴി വാഗ്ദാനം ചെയ്യുന്നു. ആശയത്തിന്റെയും നടപ്പാക്കലിന്റെയും എല്ലാ ക്രെഡിറ്റും ഓപ്പൺ സോഴ്‌സ് പൈലോൺ പ്രോജക്റ്റിനാണ് .

ഹെഡ്സ് അപ്പുകൾ! ഫ്ലെക്‌സ്‌ബോക്‌സ് ഉള്ള ഗ്യാപ്പ് യൂട്ടിലിറ്റികൾക്കുള്ള പിന്തുണ അടുത്തിടെ സഫാരിയിലേക്ക് ചേർത്തിട്ടുണ്ട്, അതിനാൽ നിങ്ങൾ ഉദ്ദേശിച്ച ബ്രൗസർ പിന്തുണ പരിശോധിക്കുന്നത് പരിഗണിക്കുക. ഗ്രിഡ് ലേഔട്ടിൽ പ്രശ്നങ്ങളൊന്നും ഉണ്ടാകരുത്. കൂടുതൽ വായിക്കുക .

ലംബമായ

.vstackലംബമായ ലേഔട്ടുകൾ സൃഷ്ടിക്കാൻ ഉപയോഗിക്കുക . അടുക്കിയിരിക്കുന്ന ഇനങ്ങൾ സ്ഥിരസ്ഥിതിയായി പൂർണ്ണ വീതിയാണ്. .gap-*ഇനങ്ങൾക്കിടയിൽ ഇടം ചേർക്കാൻ യൂട്ടിലിറ്റികൾ ഉപയോഗിക്കുക .

ആദ്യ ഇനം
രണ്ടാമത്തെ ഇനം
മൂന്നാമത്തെ ഇനം
html
<div class="vstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border">Second item</div>
  <div class="bg-light border">Third item</div>
</div>

തിരശ്ചീനമായി

തിരശ്ചീന ലേഔട്ടുകൾക്കായി ഉപയോഗിക്കുക .hstack. അടുക്കി വച്ചിരിക്കുന്ന ഇനങ്ങൾ ഡിഫോൾട്ടായി ലംബമായി കേന്ദ്രീകരിക്കുകയും അവയുടെ ആവശ്യമായ വീതി മാത്രം എടുക്കുകയും ചെയ്യുന്നു. .gap-*ഇനങ്ങൾക്കിടയിൽ ഇടം ചേർക്കാൻ യൂട്ടിലിറ്റികൾ ഉപയോഗിക്കുക .

ആദ്യ ഇനം
രണ്ടാമത്തെ ഇനം
മൂന്നാമത്തെ ഇനം
html
<div class="hstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border">Second item</div>
  <div class="bg-light border">Third item</div>
</div>

.ms-autoസ്‌പെയ്‌സറുകൾ പോലെയുള്ള തിരശ്ചീന മാർജിൻ യൂട്ടിലിറ്റികൾ ഉപയോഗിക്കുന്നു :

ആദ്യ ഇനം
രണ്ടാമത്തെ ഇനം
മൂന്നാമത്തെ ഇനം
html
<div class="hstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border ms-auto">Second item</div>
  <div class="bg-light border">Third item</div>
</div>

ഒപ്പം ലംബ നിയമങ്ങളോടൊപ്പം :

ആദ്യ ഇനം
രണ്ടാമത്തെ ഇനം
മൂന്നാമത്തെ ഇനം
html
<div class="hstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border ms-auto">Second item</div>
  <div class="vr"></div>
  <div class="bg-light border">Third item</div>
</div>

ഉദാഹരണങ്ങൾ

.vstackബട്ടണുകളും മറ്റ് ഘടകങ്ങളും അടുക്കാൻ ഉപയോഗിക്കുക :

html
<div class="vstack gap-2 col-md-5 mx-auto">
  <button type="button" class="btn btn-secondary">Save changes</button>
  <button type="button" class="btn btn-outline-secondary">Cancel</button>
</div>

ഇനിപ്പറയുന്നവ ഉപയോഗിച്ച് ഒരു ഇൻലൈൻ ഫോം സൃഷ്ടിക്കുക .hstack:

html
<div class="hstack gap-3">
  <input class="form-control me-auto" type="text" placeholder="Add your item here..." aria-label="Add your item here...">
  <button type="button" class="btn btn-secondary">Submit</button>
  <div class="vr"></div>
  <button type="button" class="btn btn-outline-danger">Reset</button>
</div>

സാസ്

.hstack {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: stretch;
}

.vstack {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-self: stretch;
}