Configuració d'espai entre Flexbox elements implica utilitzar propietats com justificar-contingut amb valors com espai-entre o espai al voltant , i escletxa , per distribuir uniformement l'espai entre els elements al llarg de l'eix principal, millorant l'espaiat i l'alineació del disseny en un contenidor flexible.
Hi ha alguns enfocaments següents:
Taula de contingut
c booleà
1. Utilitzant la propietat justify-content.
El Justify-content propietat en CSS Flexbox alinea els elements flexibles al llarg de l'eix principal. Pot distribuir l'espai entre elements amb valors com ara flex-start, flex-end, centre, espai entre, espai al voltant i espai-uniformement, controlant l'alineació i l'espaiat dins d'un contenidor flexible.
Sintaxi:
- El valor space-between s'utilitza per mostrar elements flexibles amb espai entre línies.
justify-content: space-between;>
- El valor space-around s'utilitza per mostrar elements flexibles amb espai entre, abans i després de les línies.
justify-content: space-around;>
Exemple: En aquest exemple, mostrem com a exemple l'ús de justify-content a CSS Flexbox per distribuir l'espai entre els elements. l'espai al voltant crea un espai igual al voltant dels elements, mentre que l'espai entre els llocs un espai igual entre els elements.
html Espai entre flexboxtitle><style>.flex2 { visualització: flex; justificar-contingut: espai-al voltant; color de fons: verd; } .flex3 { visualització: flex; justificar-contingut: espai-entre; color de fons: verd; } .flex-items { color de fons: #f4f4f4; amplada: 100 píxels; alçada: 50px; marge: 10 píxels; alineació de text: centre; mida de la lletra: 40px; } h3 { text-align: center; } .geeks { font-size: 40px; alineació de text: centre; color: #009900; pes de la lletra: negreta; } estil> cap> <body> <div>techcodeview.comdiv><h3>Espai entre flexboxh3> <br> <b>justificar-contingut: espai-al voltant de b><div> <div>1div><div>2div><div>3div> div> <br> <b>justificar-contingut: espai-entre b><div> <div>1div><div>2div><div>3div> div> <br>cos> html>>></pre> </code> <p dir='ltr'> <b> <strong>Sortida:</strong> </b> </p> <p dir='ltr'> <img src='//techcodeview.com/img/css-misc/95/how-set-space-between-flexbox.webp' alt="Configuració d'espai entre el Flexbox"></p> <h2 id='2-using-the-gap-property-to-set-space'> <b> <strong>2</strong> </b> <span>. Utilitzant el</span> <b> <strong>propietat de la bretxa</strong> </b> <span>per configurar l'espai</span></h2><p dir='ltr'><span>El</span> <span>propietat gap en CSS</span> <span>estableix l'espai entre els elements Flexbox o Grid. És una abreviatura d'espai entre files i columnes, cosa que facilita la gestió de l'espaiat de manera coherent sense marges ni farciment addicionals, millorant el control i la llegibilitat del disseny.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/collections-java">col·lecció java</a>
</blockquote> <p dir='ltr'> <b> <strong>Sintaxi:</strong> </b> </p> <pre class='hljs'>gap: value;></pre><p dir='ltr'> <b> <strong>Exemple:</strong> </b> <span>En aquest exemple, estem utilitzant la propietat gap juntament amb la propietat flexbox per afegir espai entre els elements individuals.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <style>.flex-container { mostrar: flex; espai: 20px; /* Estableix l'espai desitjat entre els elements flexibles */ } .flex-item { background-color: lightblue; farciment: 10px; } .geeks { font-size: 40px; color: #009900; pes de la lletra: negreta; } estil> cap> <body> <div>techcodeview.comdiv><h3>Utilitzant gap propertyh3><div> <div>Element 1div><div>Element 2div><div>Element 3div> div> cos> html>>></pre> </code> <p dir='ltr'> <b> <strong>Sortida:</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="">Categoria</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/nginx-tutorial/">Tutorial Nginx</a> </li><li> <a href="/windows-tutorial/">Tutorial De Windows</a> </li><li> <a href="/linux-networking/">Xarxa Linux</a> </li><li> <a href="/machine-learning/">Aprenentatge Automàtic</a> </li><li> <a href="/exponents-maq/">Exponents - Maq</a> </li><li> <a href="/general-knowledge-questions/">Preguntes-De-Coneixement-General</a> </li><li> <a href="/brain-teasers/">Trencaclosques</a> </li><li> <a href="/geometric-lines/">Línies Geomètriques</a> </li><li> <a href="/java-util-package/">Java - Paquet D'utilitat</a> </li><li> <a href="/software-testing/">Proves De Programari</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">Què significa 5.11 en termes militars?</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Què significa 5.11 en termes militars? Obteniu la resposta aquí.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/what-does-5-11-mean-military-terms"> <i class="fa fa-external-link"></i> Llegir Més</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Articles D'Interès</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/dip-tutorial/">Tutorial Dip</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/pseudocode-java">Pseudocodi Java</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-staar-test-131956">Què és la prova STAAR? Necessites prendre-ho?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/method-overriding-python">Anulació de mètodes a Python</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/7-steps-becoming-doctor-1311640">Els 7 passos per convertir-se en metge: una guia completa</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">Entrades Populars</h2>
<div class="content">
<ul class="list"> <li><a href="/numpy-log-python">registre numpy</a>
</li><li><a href="/how-print-java">impressió de declaracions en java</a>
</li><li><a href="/heap-sort-algorithm">algorisme d'ordenació de pila</a>
</li><li><a href="/java-if-else-statement">si més si més java</a>
</li><li><a href="/computer-network-architecture">arquitectura de xarxa</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 Tots Els Drets Reservats | <a href="//hr.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Exempció De Responsabilitat</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Sobre Nosaltres</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Política De Privadesa</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>