Tarpo tarp „Flexbox“ nustatymas elementai apima tokių savybių naudojimą kaip pateisinti-turinys su tokiomis vertybėmis kaip tarpas-tarp arba erdvė aplink , ir tarpas , tolygiai paskirstyti erdvę tarp elementų išilgai pagrindinės ašies, padidinant išdėstymo tarpus ir išlygiavimą lanksčiame konteineryje.
Yra keletas šių metodų:
Turinys
dhanashree verma
1. Turinio pagrindimo nuosavybės naudojimas.
The pateisinančio turinio nuosavybę in CSS Flexbox išlygiuoja lanksčius elementus pagal pagrindinę ašį. Jis gali paskirstyti erdvę tarp elementų su tokiomis reikšmėmis kaip lankstus pradžia, lankstus galas, centras, tarpas tarp, tarpas aplink ir tarpas tolygiai, valdydamas išlygiavimą ir tarpus lankstaus konteinerio viduje.
Sintaksė:
- Reikšmės tarpas tarp naudojamas rodyti lanksčius elementus su tarpu tarp eilučių.
justify-content: space-between;>
- Reikšmė space-around naudojama lankstiems elementams rodyti su tarpais tarp, prieš ir po eilučių.
justify-content: space-around;>
Pavyzdys: Šiame pavyzdyje pateikiame pavyzdį, kuriame demonstruojamas pagrindimo turinio naudojimas CSS Flexbox, kad būtų paskirstyta vieta tarp elementų. erdvė aplink sukuria vienodą erdvę aplink daiktus, o tarpas tarp vietų sukuria vienodą erdvę tarp daiktų.
html Tarpas tarp „flexboxtitle“><style>.flex2 { display: flex; pateisinti-turinys: erdvė-aplink; fono spalva: žalia; } .flex3 { display: flex; pateisinti-turinys: tarpas-tarp; fono spalva: žalia; } .flex-items { background-color: #f4f4f4; plotis: 100 pikselių; aukštis: 50px; paraštė: 10 pikselių; teksto lygiavimas: centre; šrifto dydis: 40 pikselių; } h3 { text-align: centre; } .geeks { šrifto dydis: 40 pikselių; teksto lygiavimas: centre; spalva: #009900; šrifto svoris: paryškintas; } style> head> <body> <div>techcodeview.comdiv><h3>Tarpas tarp flexboxh3> <br> <b>pateisinti-turinys: tarpas aplink b><div> <div>1div><div>2div><div>3div> div> <br> <b>pateisinti-turinys: tarpas-tarp b><div> <div>1div><div>2div><div>3div> div> <br>body> html>>></tag> <p dir='ltr'> <b> <strong>Išvestis:</strong> </b> </p> <p dir='ltr'> <img src='//techcodeview.com/img/css-misc/95/how-set-space-between-flexbox.webp' alt="Tarpo tarp „Flexbox“ nustatymas"></p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <h2 id='2-using-the-gap-property-to-set-space'> <b> <strong>2</strong> </b> <span>. Naudojant</span> <b> <strong>tarpo nuosavybė</strong> </b> <span>Norėdami nustatyti erdvę</span></h2><p dir='ltr'><span>The</span> <span>spragų savybė CSS</span> <span>nustato tarpą tarp Flexbox arba Grid elementų. Tai sutrumpinimas tarp eilučių ir stulpelių, todėl lengva nuosekliai tvarkyti tarpus be papildomų paraščių ar užpildų, todėl pagerėja išdėstymo valdymas ir skaitomumas.</span></p> <p dir='ltr'> <b> <strong>Sintaksė:</strong> </b> </p> <tag data-text-3='gap: value;></pre> </code><p dir='ltr'> <b> <strong>Pavyzdys:</strong> </b> <span>Šiame pavyzdyje mes naudojame tarpo ypatybę kartu su flexbox savybe, kad padidintume tarpą tarp atskirų elementų.</span></p>HTML<tag data-text-1=' <html> <head> <style>.flex-container { display: flex; tarpas: 20px; /* Nustatykite norimą atstumą tarp lanksčių elementų */ } .flex-item { background-color: lightblue; pamušalas: 10px; } .geeks { šrifto dydis: 40 pikselių; spalva: #009900; šrifto svoris: paryškintas; } style> head> <body> <div>techcodeview.comdiv><h3>Naudojant tarpo propertyh3><div> <div>Elementas 1div><div>Elementas 2div><div>Elementas 3div> div> body> html>>></tag> <p dir='ltr'> <b> <strong>Išvestis:</strong> </b> </p> <img src='//techcodeview.com/img/css-misc/95/how-set-space-between-flexbox-2.webp' alt=""> <br> <br></article>
</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->
</div><!--//primary-->
<div class="secondary col-md-4 col-sm-12 col-xs-12">
<aside class="info aside section">
<div class="section-inner">
<h2 class="">Kategorija</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/java-hashmap/">Java-Hashmap</a> </li><li> <a href="/c-strings-programs/">C Stygų Programos</a> </li><li> <a href="/base-conversion/">Bazinė Konversija</a> </li><li> <a href="/python-pandas/">Python-Pandos</a> </li><li> <a href="/companies-list/">Įmonių Sąrašas</a> </li><li> <a href="/agile-tutorial/">Agile Pamoka</a> </li><li> <a href="/ruby-basics/">Ruby-Basics</a> </li><li> <a href="/counter/">Skaitiklis</a> </li><li> <a href="/acids-bases-salts/">Rūgštys, Bazės Ir Druskos</a> </li><li> <a href="/cpu-scheduling/">Procesoriaus Planavimas</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Konvertuoti eilutę į Int Python</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Kompiuterių mokslo portalas, skirtas geikams. Jame yra gerai parašyti, gerai apgalvoti ir gerai paaiškinti informatikos ir programavimo straipsniai, viktorinos ir praktikos / konkurencinio programavimo / įmonės interviu klausimai.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/convert-string-int-python"> <i class="fa fa-external-link"></i> Skaityti Daugiau</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Įdomios Straipsniai</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/discrete-mathematics-tutorial">Diskrečiosios matematikos pamoka</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/113-great-research-paper-topics-131748">113 puikių mokslinių darbų temų</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/asp-net-mvc-tutorial">ASP.NET MVC pamoka</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/seema-anand">Seema Anand</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-disable-an-ask-242132">Kaip: išjungti Ask.FM paskyrą</a> </strong> </span>
</li><!--//item-->
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="list music aside section">
<div class="section-inner">
<h2 class="heading">Populiarios Temos</h2>
<div class="content">
<ul class="list"> <li><a href="/how-check-null-java">java nulinis patikrinimas</a>
</li><li><a href="/how-enable-disable-developer-options-android">kaip išjungti kūrėjo režimą android</a>
</li><li><a href="/shell-scripting-loop">for loop in shell scenarijus</a>
</li><li><a href="/best-smile-world">gražiausia šypsena</a>
</li><li><a href="/difference-between-arraylist">linkedlist ir arraylist</a>
</li><li><a href="/c-array-structures">struktūros masyvas c kalba</a>
</li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
</div><!--//secondary-->
</div><!--//row-->
</div><!--//masonry-->
<footer class="footer">
<div class="container text-center">
<span>
Copyright ©2025 Visos Teisės Saugomos | <a href="//iw.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Atsisakymas</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Apie Mus</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Privatumo Politika</a> </span>
</div>
</footer>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"></script>
</body>
</html>