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="//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="">Kategorie</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/summary/">Zusammenfassung</a> </li><li> <a href="/merge-sort/">Zusammenführen, Sortieren</a> </li><li> <a href="/cpp-input-output/">Cpp-Eingabe-Ausgabe</a> </li><li> <a href="/deque/">Worüber</a> </li><li> <a href="/network-layer/">Netzwerkschicht</a> </li><li> <a href="/cpp-template/">Cpp-Vorlage</a> </li><li> <a href="/privacy-policy/">Datenschutzrichtlinie</a> </li><li> <a href="/java-exceptions/">Java-Ausnahmen</a> </li><li> <a href="/java-collections/">Java-Sammlungen</a> </li><li> <a href="/pyspark-tutorial/">Pyspark-Tutorial</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">GIMP-Heilwerkzeug</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> GIMP Heal Tool mit dem, was Gimp ist, Gimp vs. Photoshop, Gimp installieren, Gimp-Dateimenü, Gimp-Tools, Gimp-Tutorial, Gimp-Funktionen, Gimp-Versionen, Auswahlmenü, Ansichtsmenü, Bildmenü usw.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/gimp-heal-tool"> <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="/how-express-2-power-5">Wie drückt man 2 hoch 5 aus?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/count-numbers-from-given-range-having-exactly-5-distinct-factors">Zählen Sie Zahlen aus einem bestimmten Bereich mit genau 5 verschiedenen Faktoren</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/c-functions">C-Funktionen</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/linux-sort">Linux-Sorte</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/complete-list-ib-courses-131826">Die vollständige Liste der IB-Kurse und -Klassen</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-stack">Was ist ein Java-Stack?</a>
</li><li><a href="/java-oops-concepts">Hoppla, Konzepte in Java</a>
</li><li><a href="/how-download-youtube-video-vlc-media-player">VLC Media Player auf YouTube herunterladen</a>
</li><li><a href="/fibonacci-series-java">Fibonacci-Code Java</a>
</li><li><a href="/what-is-special-character">Sonderzeichenname</a>
</li><li><a href="/c-strings">Zeichenfolge in c</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>
</body>
</html>