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> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <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>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> <pre> <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><!--//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="/current-gk/">Aktuelle Gk</a> </li><li> <a href="/uml-tutorial/">Uml Tutorial</a> </li><li> <a href="/c-macro/">C-Makro</a> </li><li> <a href="/node-js-tutorial/">Node.js-Tutorial</a> </li><li> <a href="/disclaimer/">Haftungsausschluss</a> </li><li> <a href="/python-directory-program/">Python-Verzeichnisprogramm</a> </li><li> <a href="/chemistry-class-10-cat/">Chemie-Klasse-10</a> </li><li> <a href="/merge-sort/">Zusammenführen, Sortieren</a> </li><li> <a href="/python-os-module-programs/">Python-Betriebssystemmodulprogramme</a> </li><li> <a href="/java-timestamp-class/">Java-Zeitstempelklasse</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Was ist 1 Tola in Gramm?</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Was ist 1 Tola in Gramm? Hier erhalten Sie die Antwort.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/what-is-1-tola-grams"> <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="/c-serialization">C#-Serialisierung</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-reach-school-131876">Was ist eine Reach-Schule? Welche Reach-Schulen sollte ich wählen?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/java-random-class">Java Random-Klasse</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/shortcut-keys/">Tastenkombinationen</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/python-dictionary-comprehension">Verständnis des Python-Wörterbuchs</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="/linux-gzip">gzip für Linux</a>
</li><li><a href="/java-list-indexof-method">Index der Liste</a>
</li><li><a href="/bfs-vs-dfs">bfs und dfs</a>
</li><li><a href="/java-do-while-loop">Java macht eine While-Schleife</a>
</li><li><a href="/how-read-csv-file-java">Lesen aus einer CSV-Datei in Java</a>
</li><li><a href="/how-read-csv-file-java">aus CSV-Java lesen</a>
</li><li><a href="/nginx-variables">Nginx-Variablen</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="//no.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>
</body>
</html>