அடுக்குகள்

எங்களின் ஃப்ளெக்ஸ்பாக்ஸ் பயன்பாடுகளின் மேல் கட்டமைக்கும் சுருக்கெழுத்து உதவியாளர்கள், கூறு அமைப்பை முன்னெப்போதையும் விட வேகமாகவும் எளிதாகவும் உருவாக்குகிறார்கள்.

இந்தப் பக்கத்தில்

பூட்ஸ்டார்ப்பில் தளவமைப்புகளை விரைவாகவும் எளிதாகவும் உருவாக்க, பல ஃப்ளெக்ஸ்பாக்ஸ் பண்புகளைப் பயன்படுத்துவதற்கான குறுக்குவழியை அடுக்குகள் வழங்குகின்றன. கருத்து மற்றும் செயல்படுத்தலுக்கான அனைத்து கடன்களும் திறந்த மூல பைலான் திட்டத்திற்கு செல்கிறது .

எச்சரிக்கை! ஃப்ளெக்ஸ்பாக்ஸுடனான இடைவெளி பயன்பாடுகளுக்கான ஆதரவு சமீபத்தில் Safari இல் சேர்க்கப்பட்டது, எனவே நீங்கள் உத்தேசித்துள்ள உலாவி ஆதரவைச் சரிபார்க்கவும். கிரிட் அமைப்பில் எந்த பிரச்சனையும் இருக்கக்கூடாது. மேலும் படிக்கவும் .

செங்குத்து

செங்குத்து தளவமைப்புகளை உருவாக்க பயன்படுத்தவும் .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;
}