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="/best-apps/">Millors Aplicacions</a> </li><li> <a href="/circular-linked-list/">Llista Enllaçada Circular</a> </li><li> <a href="/randomized/">Aleatoritzat</a> </li><li> <a href="/product-management-qna/">Gestió De Productes Qna</a> </li><li> <a href="/linux-networking/">Xarxa Linux</a> </li><li> <a href="/blog/">Bloc</a> </li><li> <a href="/software-testing/">Proves De Programari</a> </li><li> <a href="/algorithms-greedy-algorithms/">Algoritmes-Algoritmes Cobdiciosos</a> </li><li> <a href="/kruskal/">Kruskal</a> </li><li> <a href="/c-data-types/">C-Tipus De Dades</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">Com establir l'espai entre el Flexbox?</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Un portal d'informàtica per a frikis. Conté articles d'informàtica i programació ben escrits, ben pensats i ben explicats, proves i preguntes pràctiques/programació competitiva/entrevistes d'empresa.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/how-set-space-between-flexbox"> <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="/how-add-jquery-html">Com afegir jQuery a HTML</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/is-it-legal-dumpster-dive-arizona">És legal bussejar amb contenidors a Arizona?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-multiplexing">Què és la multiplexació?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/remove-last-element-from-list-python">Elimina l'últim element de la llista a Python</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/sql-distinct-clause">Clàusula diferent de SQL</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="/javascript-onclick-event">js onclick</a>
</li><li><a href="/java-string-compareto">mètode de comparació java</a>
</li><li><a href="/java-foreach-loop">per cada java</a>
</li><li><a href="/callback-hell-javascript">infern de trucada en javascript</a>
</li><li><a href="/java-localdate-class">data local</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="//tr.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>