Impostazione dello spazio tra Flexbox items implica l'utilizzo di proprietà come giustificare il contenuto con valori come spazio in mezzo O spazio intorno , E spacco , per distribuire uniformemente lo spazio tra gli elementi lungo l'asse principale, migliorando la spaziatura e l'allineamento del layout in un contenitore flessibile.
Esistono alcuni approcci seguenti:
Tabella dei contenuti
1. Utilizzando la proprietà giustifica-contenuto.
IL proprietà giustifica-contenuto In Flexbox CSS allinea gli elementi flessibili lungo l'asse principale. Può distribuire lo spazio tra gli elementi con valori come flex-start, flex-end, center, space-between, space-around e space-evenly, controllando l'allineamento e la spaziatura all'interno di un contenitore flessibile.
Sintassi:
- Il valore spazio-tra viene utilizzato per visualizzare elementi flessibili con spazio tra le righe.
justify-content: space-between;>
- Il valore space-around viene utilizzato per visualizzare elementi flessibili con spazio tra, prima e dopo le righe.
justify-content: space-around;>
Esempio: In questo esempio dimostriamo l'utilizzo di aware-content in CSS Flexbox per distribuire lo spazio tra gli elementi. space-around crea uno spazio uguale attorno agli elementi, mentre space-between inserisce uno spazio uguale tra gli elementi.
html Spazio tra flexboxtitle><style>.flex2 { display: flessibile; giustifica-contenuto: spazio intorno; colore di sfondo: verde; } .flex3 { display: flessibile; giustifica-contenuto: spazio-tra; colore di sfondo: verde; } .flex-items { colore di sfondo: #f4f4f4; larghezza: 100px; altezza: 50px; margine: 10px; allineamento testo: centro; dimensione carattere: 40px; } h3 { allineamento testo: centro; } .geeks { dimensione carattere: 40px; allineamento testo: centro; colore: #009900; peso carattere: grassetto; } stile> testa> <body> <div>techcodeview.comdiv><h3>Spazio tra flexboxh3> <br> <b>giustifica-contenuto: spazio-intorno b><div> <div>1div><div>2div><div>3div>div> <br> <b>giustifica-contenuto: spazio-tra b><div> <div>1div><div>2div><div>3div>div> <br>corpo>html>></pre> </code> <p dir='ltr'> <b> <strong>Produzione:</strong> </b> </p> <p dir='ltr'> <img src='//techcodeview.com/img/css-misc/95/how-set-space-between-flexbox.webp' alt="Impostazione dello spazio tra i Flexbox"></p> <h2 id='2-using-the-gap-property-to-set-space'> <b> <strong>2</strong> </b> <span>. Usando il</span> <b> <strong>proprietà del divario</strong> </b> <span>per impostare lo spazio</span></h2><p dir='ltr'><span>IL</span> <span>proprietà gap nei CSS</span> <span>imposta lo spazio tra gli elementi Flexbox o Grid. È una scorciatoia per gap di riga e gap di colonna, che semplifica la gestione della spaziatura in modo coerente senza margini o spaziatura aggiuntivi, migliorando il controllo del layout e la leggibilità.</span></p> <p dir='ltr'> <b> <strong>Sintassi:</strong> </b> </p> <pre class='hljs'>gap: value;></pre><p dir='ltr'> <b> <strong>Esempio:</strong> </b> <span>In questo esempio, utilizziamo la proprietà gap insieme alla proprietà flexbox per aggiungere uno spazio tra i singoli elementi.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <style>.flex-contenitore { display: flex; spazio: 20px; /* Imposta la spaziatura desiderata tra gli elementi flessibili */ } .flex-item { background-color: lightblue; imbottitura: 10px; } .geeks { dimensione carattere: 40px; colore: #009900; peso carattere: grassetto; } stile> testa> <body> <div>techcodeview.comdiv><h3>Utilizzo della proprietà gaph3><div> <div>Elemento 1div><div>Elemento 2div><div>Elemento 3div> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Produzione:</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="/cpp-functions/">Funzioni Cpp</a> </li><li> <a href="/java-instant-class/">Classe Istantanea Java</a> </li><li> <a href="/java-calendar-class/">Classe Di Calendario Java</a> </li><li> <a href="/java-object-class/">Classe Oggetto Java</a> </li><li> <a href="/microprocessor-tutorial/">Tutorial Sul Microprocessore</a> </li><li> <a href="/get-informed/">Informati</a> </li><li> <a href="/temples/">Templi</a> </li><li> <a href="/dsa/">DSA</a> </li><li> <a href="/intellij-idea-tutorial/">Esercitazione Su Intellij Idea</a> </li><li> <a href="/online-game-tools/">Strumenti Di Gioco Online</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">Panda DataFrame.loc[]</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Pandas DataFrame.loc con Cos'è Python Pandas, Lettura di più file, Valori nulli, Indici multipli, Applicazione, Nozioni di base sull'applicazione, Ricampionamento, Tracciamento dei dati, Spostamento di funzioni di Windows, Serie, Leggi il file, Operazioni sui dati, Filtra dati ecc.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/pandas-dataframe-loc"> <i class="fa fa-external-link"></i> Per Saperne Di Più</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Articoli Interessanti</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/labelled-diagram-neuron-with-detailed-explanations">Diagramma etichettato del neurone con spiegazioni dettagliate</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/python-ways-convert-string-json-object">Pitone | Modi per convertire una stringa in un oggetto json</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/explainer-what-is-snapchat-24262">Spiegazione: cos'è Snapchat?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-many-ml-is-16-oz">Quanti ml sono 16 once?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/python-any-function">Funzione Python any()</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">Messaggi Popolari</h2>
<div class="content">
<ul class="list"> <li><a href="/how-iterate-map-java">iterando una mappa in Java</a>
</li><li><a href="/saira-banu">attore saira banu</a>
</li><li><a href="/sql-update-with-join">aggiornamento in SQL con join</a>
</li><li><a href="/difference-between-fox">lupo contro volpe</a>
</li><li><a href="/best-smile-world">miglior sorriso del mondo</a>
</li><li><a href="/java-convert-string-int">come convertire una stringa in int in Java</a>
</li><li><a href="/gray-code">codice grigio</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 Tutti I Diritti Riservati | <a href="//nl.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Disclaimer</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Chi Siamo</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Politica Sulla Riservatezza</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>