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;
}