Ruimte instellen tussen Flexbox items omvatten het gebruik van eigenschappen zoals rechtvaardigen-inhoud met waarden als ruimte tussen of ruimte-rond , En gat , om de ruimte gelijkmatig te verdelen tussen items langs de hoofdas, waardoor de lay-outafstand en uitlijning in een flexibele container worden verbeterd.
hoe het script in Linux uit te voeren
Er zijn enkele volgende benaderingen:
Inhoudsopgave
1. De eigenschap justify-content gebruiken.
De justify-content eigenschap in CSS Flexbox lijnt flex-items uit langs de hoofdas. Het kan de ruimte verdelen tussen items met waarden als flex-start, flex-end, center, space-between, space-around en space-evenly, waarbij de uitlijning en spatiëring binnen een flex-container wordt geregeld.
Syntaxis:
- De waarde space-between wordt gebruikt voor het weergeven van flexitems met ruimte tussen de regels.
justify-content: space-between;>
- De waarde space-around wordt gebruikt voor het weergeven van flexitems met ruimte tussen, voor en na de regels.
justify-content: space-around;>
Voorbeeld: In dit voorbeeld demonstreren we het gebruik van justify-content in CSS Flexbox om ruimte tussen items te verdelen. space-around creëert gelijke ruimte rond items, terwijl space-between gelijke ruimte tussen items plaatst.
html Ruimte tussen flexboxtitle><style>.flex2 {weergave: flex; rechtvaardigen-inhoud: ruimte rondom; achtergrondkleur: groen; } .flex3 {weergave: flex; rechtvaardigen-inhoud: ruimte tussen; achtergrondkleur: groen; } .flex-items {achtergrondkleur: #f4f4f4; breedte: 100px; hoogte: 50px; marge: 10px; tekst uitlijnen: centreren; lettergrootte: 40px; } h3 {tekst uitlijnen: centreren; } .geeks {lettergrootte: 40px; tekst uitlijnen: centreren; kleur: #009900; lettertypegewicht: vet; } stijl> hoofd> <body> <div>techcodeview.comdiv><h3>Ruimte tussen flexboxh3> <br> <b>rechtvaardigen-inhoud: spatie rond b><div> <div>1div><div>2div><div>3div>div> <br> <b>justify-content: spatie tussen b><div> <div>1div><div>2div><div>3div>div> <br>body>html>></pre> </code> <p dir='ltr'> <b> <strong>Uitgang:</strong> </b> </p> <p dir='ltr'> <img src='//techcodeview.com/img/css-misc/95/how-set-space-between-flexbox.webp' alt="Ruimte instellen tussen de Flexbox"></p> <h2 id='2-using-the-gap-property-to-set-space'> <b> <strong>2</strong> </b> <span>. De ... gebruiken</span> <b> <strong>kloof eigendom</strong> </b> <span>om ruimte in te stellen</span></h2><p dir='ltr'><span>De</span> <span>gap-eigenschap in CSS</span> <span>stelt ruimte in tussen Flexbox- of Grid-items. Het is een afkorting voor rij-afstand en kolom-afstand, waardoor het eenvoudig is om de spatiëring consistent te beheren zonder extra marges of opvulling, waardoor de controle over de lay-out en de leesbaarheid worden verbeterd.</span></p> <p dir='ltr'> <b> <strong>Syntaxis:</strong> </b> </p> <pre class='hljs'>gap: value;></pre><p dir='ltr'> <b> <strong>Voorbeeld:</strong> </b> <span>In dit voorbeeld gebruiken we de eigenschap gap samen met de eigenschap flexbox om ruimte tussen de afzonderlijke items toe te voegen.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <style>.flex-container {weergave: flex; opening: 20px; /* Stel de gewenste afstand tussen flexitems in */ } .flex-item { achtergrondkleur: lichtblauw; opvulling: 10px; } .geeks {lettergrootte: 40px; kleur: #009900; lettertypegewicht: vet; } stijl> hoofd> <body> <div>techcodeview.comdiv><h3>Met behulp van gap-eigenschaph3><div> <div>Element 1div><div>Element 2div><div>Element 3div> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Uitgang:</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="//changelesschoir.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="">Categorie</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/java-classes/">Java-Klassen</a> </li><li> <a href="/get-informed/">Laat U Informeren</a> </li><li> <a href="/ancient-history/">Oude Geschiedenis</a> </li><li> <a href="/socket-programming/">Socket-Programmering</a> </li><li> <a href="/yaml-tutorial/">Yaml-Zelfstudie</a> </li><li> <a href="/c-data-types/">C-Gegevenstypen</a> </li><li> <a href="/dsa-tutorials/">Dsa-Tutorials</a> </li><li> <a href="/cpp-advanced/">Cpp-Geavanceerd</a> </li><li> <a href="/reactjs-component/">Reactjs-Component</a> </li><li> <a href="/statistics-maq/">Statistieken - Maq</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="//changelesschoir.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div>
</div>
</div>
</div>
<div class="section-inner">
<h2 class="heading">Overspannende boom</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Omvattende boom met inleiding, Asymptotische analyse, Array, Aanwijzer, Structuur, Enkelvoudig gekoppelde lijst, Dubbel gekoppelde lijst, Circulair gekoppelde lijst, Binair zoeken, Lineair zoeken, Sorteren, Emmer sorteren, Kamsorteren, Shell sorteren, Heap sorteren, Samenvoegen sorteren, Selectie Sorteren, tellen, sorteren, stapelen, Qene, circulaire Quene, grafiek, boom, B-boom, B+ boom, Avl-boom enz.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/spanning-tree"> <i class="fa fa-external-link"></i> Lees Verder</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Interessante Artikelen</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/hours-days-calculator-online-conversion-calculator">Uren naar Dagen Calculator – Online conversiecalculator</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/python-random/">Python-Willekeurig</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-find-use-ap-score-calculators-1311294">AP-scorecalculators zoeken en gebruiken</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/sql-commands-ddl-dql">SQL-opdrachten | DDL-, DQL-, DML-, DCL- en TCL-opdrachten</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/shared_ptr-c">gedeelde_ptr in C++</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">Populaire Berichten</h2>
<div class="content">
<ul class="list"> <li><a href="/splay-tree">bomen spreiden</a>
</li><li><a href="/java-naming-convention">Java-naamgevingsconventies</a>
</li><li><a href="/round-robin-scheduling-algorithm">rr-algoritme</a>
</li><li><a href="/sql-order-random">SQL-volgorde willekeurig</a>
</li><li><a href="/k-nearest-neighbor-algorithm">knn-algoritme</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 Alle Rechten Voorbehouden | <a href="//de.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Vrijwaring</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Wie Zijn Wij?</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Privacybeleid</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>
<script>
!function(){"use strict";let t=document.createElement("button");t.id="toTopBtn",t.innerHTML="↑";let e=`
#toTopBtn {
position: fixed;
bottom: 25px;
right: 25px;
z-index: 9999;
opacity: 0;
visibility: hidden;
background-color: #213141;
color: white;
border: none;
border-radius: 8px;
width: 50px;
height: 50px;
font-size: 24px;
cursor: pointer;
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
#toTopBtn:hover {
background-color: #555;
}
`,i=document.createElement("style");i.type="text/css",i.innerText=e,document.head.appendChild(i),document.body.appendChild(t),window.addEventListener("scroll",()=>{let e=window.scrollY||document.documentElement.scrollTop;e>300?(t.style.opacity="1",t.style.visibility="visible"):(t.style.opacity="0",t.style.visibility="hidden")}),t.addEventListener("click",()=>{window.scrollTo({top:0,behavior:"smooth"})})}();
</script>
</body>
</html>