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> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <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>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> <pre> <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><!--//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="/pandas-dataframe-program/">Pandas-Dataframe-Programa</a> </li><li> <a href="/combinatorial/">Combinatori</a> </li><li> <a href="/layout-manager/">Gestor De Maquetació</a> </li><li> <a href="/java-design-patterns/">Patrons De Disseny De Java</a> </li><li> <a href="/python-matrix-program/">Programa Matricial Python</a> </li><li> <a href="/html-xml/">Html I Xml</a> </li><li> <a href="/python-string/">Cadena-Python</a> </li><li> <a href="/java-stringbuffer/">Java-Stringbuffer</a> </li><li> <a href="/parents/">Pares</a> </li><li> <a href="/bucketsort/">Bucketsort</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">no Operador en Python | Lògica booleana</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="/not-operator-python-boolean-logic"> <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="/linear-programming">Programació lineal</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-ymail">Què és Ymail</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/floyd-warshall/">Floyd-Warshall</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/java-keyword/">Paraula Clau De Java</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/javascript-object/">Objecte-Javascript</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="/quick-sort-algorithm">classificació ràpida</a>
</li><li><a href="/greatandhra-reviews">granandhra</a>
</li><li><a href="/java-string-contains">cadena.conté java</a>
</li><li><a href="/java-convert-char-string">java convertir char en cadena</a>
</li><li><a href="/get-current-date-time-java">java obtenint la data actual</a>
</li><li><a href="/constructors-java">constructor en java</a>
</li><li><a href="/java-string-trim">cadena de retall de java</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="//sr.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>
</body>
</html>