Abstand zwischen Flexbox festlegen Elemente beinhalten die Verwendung von Eigenschaften wie Rechtfertigungsinhalt mit Werten wie Raum dazwischen oder Raum-um , Und Lücke , um den Platz zwischen den Elementen entlang der Hauptachse gleichmäßig zu verteilen und so den Layoutabstand und die Ausrichtung in einem flexiblen Container zu verbessern.
Es gibt einige folgende Ansätze:
Inhaltsverzeichnis
- Verwendung der justify-content-Eigenschaft.
- Verwenden der Gap-Eigenschaft zum Festlegen des Abstands
1. Verwendung der justify-content-Eigenschaft.
Der justify-content-Eigenschaft In CSS-Flexbox Richtet flexible Elemente entlang der Hauptachse aus. Es kann Platz zwischen Elementen mit Werten wie Flex-Start, Flex-Ende, Mitte, Abstand zwischen, Abstand um und Abstand gleichmäßig verteilen und so die Ausrichtung und den Abstand innerhalb eines Flex-Containers steuern.
Syntax:
- Der Wert space-between wird zum Anzeigen von Flex-Elementen mit Leerzeichen zwischen den Zeilen verwendet.
justify-content: space-between;>
- Der Wert space-around wird zum Anzeigen von Flex-Elementen mit Leerzeichen zwischen, vor und nach den Zeilen verwendet.
justify-content: space-around;>
Beispiel: In diesem Beispiel demonstrieren wir die Verwendung von justify-content in CSS Flexbox, um Platz zwischen Elementen zu verteilen. „space-around“ schafft den gleichen Abstand um die Elemente herum, während „space-between“ den gleichen Abstand zwischen den Elementen erzeugt.
html Leerzeichen zwischen Flexboxtitle><style>.flex2 { display: flex; justify-content: space-around; Hintergrundfarbe: grün; } .flex3 { display: flex; justify-content: Leerzeichen dazwischen; Hintergrundfarbe: grün; } .flex-items { Hintergrundfarbe: #f4f4f4; Breite: 100px; Höhe: 50px; Rand: 10px; Textausrichtung: Mitte; Schriftgröße: 40px; } h3 { text-align: center; } .geeks { Schriftgröße: 40px; Textausrichtung: Mitte; Farbe: #009900; Schriftdicke: fett; } style> head> <body> <div>techcodeview.comdiv><h3>Leerzeichen zwischen flexboxh3> <br> <b>justify-content: space-around b><div> <div>1div><div>2div><div>3div> div> <br> <b>justify-content: Leerzeichen zwischen b><div> <div>1div><div>2div><div>3div> div> <br>body> html>></pre> </code> <p dir='ltr'> <b> <strong>Ausgabe:</strong> </b> </p> <p dir='ltr'> <img src='//techcodeview.com/img/css-misc/95/how-set-space-between-flexbox.webp' alt="Abstand zwischen der Flexbox festlegen"></p> <h2 id='2-using-the-gap-property-to-set-space'> <b> <strong>2</strong> </b> <span>. Verwendung der</span> <b> <strong>Lückeneigentum</strong> </b> <span>um Leerzeichen festzulegen</span></h2><p dir='ltr'><span>Der</span> <span>Gap-Eigenschaft in CSS</span> <span>Legt den Abstand zwischen Flexbox- oder Grid-Elementen fest. Es handelt sich um eine Abkürzung für Zeilenabstand und Spaltenabstand, die es einfach macht, Abstände ohne zusätzliche Ränder oder Auffüllungen konsistent zu verwalten und so die Kontrolle über das Layout und die Lesbarkeit zu verbessern.</span></p> <p dir='ltr'> <b> <strong>Syntax:</strong> </b> </p> <pre class='hljs'>gap: value;></pre><p dir='ltr'> <b> <strong>Beispiel:</strong> </b> <span>In diesem Beispiel verwenden wir die Gap-Eigenschaft zusammen mit der Flexbox-Eigenschaft, um eine Lücke zwischen den einzelnen Elementen hinzuzufügen.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <style>.flex-container { display: flex; Lücke: 20px; /* Legen Sie den gewünschten Abstand zwischen Flex-Elementen fest */ } .flex-item { Hintergrundfarbe: hellblau; Polsterung: 10px; } .geeks { Schriftgröße: 40px; Farbe: #009900; Schriftdicke: fett; } style> head> <body> <div>techcodeview.comdiv><h3>Verwenden der Gap-Eigenschaft h3><div> <div>Element 1div><div>Element 2div><div>Element 3div> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Ausgabe:</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="">Kategorie</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/data-visualization/">Datenvisualisierung</a> </li><li> <a href="/java-drivermanager/">Java Drivermanager</a> </li><li> <a href="/google-workspace/">Google Workspace</a> </li><li> <a href="/java-list-methods/">Java-Listenmethoden</a> </li><li> <a href="/javascript/">Javascript</a> </li><li> <a href="/operators/">Betreiber</a> </li><li> <a href="/hadoop-tutorial/">Hadoop-Tutorial</a> </li><li> <a href="/python/">Python</a> </li><li> <a href="/linux-unix/">Linux-Unix</a> </li><li> <a href="/spotlight/">Scheinwerfer</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">Was ist das Nationalgericht der Vereinigten Staaten (USA)?</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> In den Vereinigten Staaten gibt es offiziell kein ausgewiesenes Nationalgericht, aber Hamburger und Apfelkuchen sind aufgrund ihrer Beliebtheit und des weit verbreiteten Verzehrs im ganzen Land inoffizielle Nationalgerichte der USA. Hamburger ist aufgrund seiner Beliebtheit das beliebteste Gericht in Amerika. Apfelkuchen nimmt in der amerikanischen Küche und Kultur einen besonderen Platz ein.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/what-is-national-dish-united-states"> <i class="fa fa-external-link"></i> Weiterlesen</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Interessante Artikel</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/python-tkinter-frame">Python Tkinter-Frame</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/types-computer">Arten von Computern</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/program-for-worst-fit-algorithm-in-memory-management">Programm für den Worst-Fit-Algorithmus in der Speicherverwaltung</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/problems-based-converse">Probleme basierend auf Converse, Inverse und Contrapositiv</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/sat-standard-deviation-131980">SAT-Standardabweichung: Was bedeutet das für Sie?</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">Beliebte Beiträge</h2>
<div class="content">
<ul class="list"> <li><a href="/java-convert-string-int">String-zu-Int-Konverter</a>
</li><li><a href="/run-command-linux">Linux-Ausführungsbefehl</a>
</li><li><a href="/hibernate-tutorial">Was ist Winterschlaf?</a>
</li><li><a href="/difference-between-ice">Unterschied zwischen Eis und Schnee</a>
</li><li><a href="/negation-discrete-mathematics">diskrete Mathematik-Negation</a>
</li><li><a href="/how-sort-arraylist-java">Sortieren Sie die Arrayliste in Java</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 Rechte Vorbehalten | <a href="//lv.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Haftungsausschluss</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Über Uns</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Datenschutzrichtlinie</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>