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> <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 class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//spiritscaution.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </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="/technical-scripter/">Techninis scenarijus</a> </li><li> <a href="/binary-search-tree/">Dvejetainis paieškos medis</a> </li><li> <a href="/c-pointers/">C Žymekliai</a> </li><li> <a href="/java-integer/">Java-Sveikasis Skaičius</a> </li><li> <a href="/physics-class-10-cat/">Fizika-10 Klasė</a> </li><li> <a href="/python-sorting-exercises/">Pitonų Rūšiavimo Pratimai</a> </li><li> <a href="/javascript-questions/">„Javascript“ – Klausimai</a> </li><li> <a href="/r-dataframe-function/">R Dataframe-Funkcija</a> </li><li> <a href="/angular-material/">Kampinė Medžiaga</a> </li><li> <a href="/vb-net-tutorial/">Vb.net Pamoka</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<div class="content">
<div class="item">
<div class="rekl_placeholder" id="sidebar_placeholder_1"> <script type="text/javascript">atOptions = {'key' : 'f53f1abf3c3a788f849c12a956865db1','format' : 'iframe','height' : 300,'width' : 160,'params' : {}};</script><script type="text/javascript" src="//spiritscaution.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div>
</div>
</div>
</div>
<div class="section-inner">
<h2 class="heading">Sudėtis ir atimtis naudojant 1 papildinį</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Sudėjimas ir atėmimas naudojant 1 papildymą skaitmeninėje elektronikoje su pamoka, skaičių sistema, pilku kodu, Būlio algebra ir loginiais vartais, kanonine ir standartine forma, Būlio funkcijos supaprastinimu ir kt.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/addition-subtraction-using-1s-complement"> <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="/java-io-file-class-java">Java.io.File Class Java</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/dip-tutorial/">Dip Pamoka</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/difference-between-program">Skirtumas tarp programos ir programinės įrangos</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/lowest-common-ancestor-binary-tree">Žemiausias bendras protėvis dvejetainiame medyje</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/top-10-largest-cities-united-states-population-ranked">10 geriausių Jungtinių Valstijų miestų pagal gyventojų skaičių [Atnaujintas 2024 m. sąrašas]</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-reverse-string-java">atvirkštinė eilutė java</a>
</li><li><a href="/java-do-while-loop">java daryti kol</a>
</li><li><a href="/madhuri-dixit">Madhuri pasakė, eik</a>
</li><li><a href="/json-example">json duomenų pavyzdys</a>
</li><li><a href="/katrina-kaif">katrina kaif</a>
</li><li><a href="/python-programs-python-programming-examples">paprasta python programa</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="//fi.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>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
</body>
</html>