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="//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="">Categoria</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/c-set-function/">Funció Conjunta C++</a> </li><li> <a href="/adobe/">Adobe</a> </li><li> <a href="/cell-biology/">Biologia Cel·lular</a> </li><li> <a href="/random-algorithms/">Algorismes Aleatoris</a> </li><li> <a href="/selenium-tutorial/">Tutorial De Seleni</a> </li><li> <a href="/banking-general-awareness/">Sensibilització General Bancària</a> </li><li> <a href="/celebrity/">Famosa</a> </li><li> <a href="/time-complexity/">Complexitat Temporal</a> </li><li> <a href="/spring-cloud-tutorial/">Tutorial Spring Cloud</a> </li><li> <a href="/combinatorial/">Combinatori</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">Etiqueta HTML en negreta</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Etiqueta HTML en negreta o etiqueta HTML b amb exemples, formularis, entrada, text, àncora, imatge, encapçalament, marquesina, àrea de text, paràgraf, títol, cometes, codi, etc.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/html-bold-tag"> <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="/java-enum-class/">Classe Java Enum</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/isupper-islower">isupper(), islower(), lower(), upper() en Python i les seves aplicacions</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/binary-tree-java">Arbre binari Java</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-many-inches-is-4-cm-equal">A quantes polzades equivalen 4 cm?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/derivative-arcsin">Derivada de Arcsin</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="/bfs-algorithm">cerca bfs</a>
</li><li><a href="/gimp-deselect">gimp com anul·lar la selecció</a>
</li><li><a href="/sql-update-with-join">actualitzar en sql amb join</a>
</li><li><a href="/system-out-println-java">java system.out.println</a>
</li><li><a href="/java-convert-string-int">java cast string a int</a>
</li><li><a href="/git-push">ordres git per push</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="//da.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>
<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>