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="/keyboard-shortcuts/">Dreceres De Teclat</a> </li><li> <a href="/css-questions/">Css-Preguntes</a> </li><li> <a href="/moores-voting-algorithm/">Algoritme De Votació De Moore</a> </li><li> <a href="/python-time-module/">Mòdul De Temps Python</a> </li><li> <a href="/microservices-tutorial/">Tutorial De Microserveis</a> </li><li> <a href="/how/">Com</a> </li><li> <a href="/kali-linux-tutorial/">Tutorial Kali Linux</a> </li><li> <a href="/blog/">Bloc</a> </li><li> <a href="/matplotlib-pyplot-class/">Matplotlib Pyplot-Classe</a> </li><li> <a href="/algorithms-analysis-algorithms/">Algoritmes-Anàlisi D'algoritmes</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è és la paperera de reciclatge?</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Què és la paperera de reciclatge amb una explicació del dispositiu d'entrada, dispositiu de sortida, memòria, CPU, placa base, xarxa informàtica, virus, programari, maquinari, etc.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/what-is-recycle-bin"> <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="/gmail-questions/">Preguntes De Gmail</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/read-write-parse-json-using-python">Llegir, escriure i analitzar JSON amb Python</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-transmission-control-protocol">Què és el protocol de control de transmissió (TCP)?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/should-i-take-ap-calculus-ab-131998">He de prendre AP Calculus AB o AP Calculus BC?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/python-sqlalchemy-func">Python SQLAlchemy - func.count amb filtre</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="/how-download-youtube-video-vlc-media-player">descarregar vídeos de youtube a vlc</a>
</li><li><a href="/roman-number-1-100">números romans 1-100</a>
</li><li><a href="/javascript-multi-line-string">js cadena multilínia</a>
</li><li><a href="/difference-between-fox">diferència entre guineu i llop</a>
</li><li><a href="/java-naming-convention">convenció de nomenclatura de java</a>
</li><li><a href="/json-example">exemple de dades json</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="//ro.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>