Inställningsutrymme mellan Flexbox objekt innebär att man använder egenskaper som motivera-innehåll med värderingar som mellanrum eller utrymme runt , och glipa , för att jämnt fördela utrymmet mellan objekt längs huvudaxeln, vilket förbättrar layoutavstånd och inriktning i en flexibel behållare.
Det finns några följande tillvägagångssätt:
Innehållsförteckning
1. Använda egenskapen justify-content.
De motivera-innehåll egendom i CSS Flexbox justerar flexobjekt längs huvudaxeln. Den kan fördela utrymmet mellan objekt med värden som flex-start, flex-end, center, space-between, space-around och space-evenly, control alignment and space in a flex container.
Syntax:
- Värdet space-between används för att visa flexobjekt med mellanrum mellan raderna.
justify-content: space-between;>
- Värdet space-around används för att visa flexobjekt med mellanrum mellan, före och efter raderna.
justify-content: space-around;>
Exempel: I det här exemplet visar vi att man använder justify-content i CSS Flexbox för att fördela utrymme mellan objekt. space-around skapar lika utrymme runt objekt, medan utrymme-mellan platser lika utrymme mellan objekt.
html Mellanrum mellan flexboxtitle><style>.flex2 { display: flex; motivera-innehåll: space-around; bakgrundsfärg: grön; } .flex3 { display: flex; motivera-innehåll: mellanslag-mellan; bakgrundsfärg: grön; } .flex-items { bakgrundsfärg: #f4f4f4; bredd: 100px; höjd: 50px; marginal: 10px; text-align: center; teckenstorlek: 40px; } h3 { text-align: center; } .geeks { font-size: 40px; text-align: center; färg: #009900; font-weight: fet; } stil> huvud> <body> <div>techcodeview.comdiv><h3>Mellanrum mellan flexboxh3> <br> <b>justify-content: space-around b><div> <div>1div><div>2div><div>3div> div> <br> <b>justify-content: space-between b><div> <div>1div><div>2div><div>3div> div> <br>body> html>></pre> </code> <p dir='ltr'> <b> <strong>Produktion:</strong> </b> </p> <p dir='ltr'> <img src='//techcodeview.com/img/css-misc/95/how-set-space-between-flexbox.webp' alt="Ställa in utrymmet mellan Flexbox"></p> <h2 id='2-using-the-gap-property-to-set-space'> <b> <strong>2</strong> </b> <span>. Använda</span> <b> <strong>gap egendom</strong> </b> <span>för att ställa in utrymme</span></h2><p dir='ltr'><span>De</span> <span>gap-egenskap i CSS</span> <span>ställer in utrymmet mellan Flexbox- eller Grid-objekt. Det är en förkortning för rad-gap och kolumn-gap, vilket gör det enkelt att hantera avstånd konsekvent utan extra marginaler eller utfyllnad, vilket förbättrar layoutkontroll och läsbarhet.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/javascript-global-variable">js global variabel</a>
</blockquote> <p dir='ltr'> <b> <strong>Syntax:</strong> </b> </p> <pre class='hljs'>gap: value;></pre><p dir='ltr'> <b> <strong>Exempel:</strong> </b> <span>I det här exemplet använder vi egenskapen gap tillsammans med egenskapen flexbox för att lägga till gap mellan de enskilda objekten.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <style>.flex-container { display: flex; gap: 20px; /* Ställ in önskat avstånd mellan flexobjekt */ } .flex-item { background-color: lightblue; stoppning: 10px; } .geeks { font-size: 40px; färg: #009900; font-weight: fet; } stil> huvud> <body> <div>techcodeview.comdiv><h3>Använder gap propertyh3><div> <div>Element 1div><div>Element 2div><div>Element 3div> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Produktion:</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="">Kategori</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/software-testing/">Mjukvarutestning</a> </li><li> <a href="/linux/">Linux</a> </li><li> <a href="/rxjs-tutorial/">Rxjs Handledning</a> </li><li> <a href="/python-numpy-matrix-function/">Python Numpy-Matrix Funktion</a> </li><li> <a href="/physical-quantities/">Fysiska Kvantiteter</a> </li><li> <a href="/tourist-places/">Turistplatser</a> </li><li> <a href="/asp-net-tutorial/">Handledning För Asp .Net</a> </li><li> <a href="/sql-clauses-operators/">Sql-Klausuler-Operatorer</a> </li><li> <a href="/python-numpy-arraycreation/">Python Numpy-Arraycreation</a> </li><li> <a href="/picked/">Plockad</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">Hur man lägger till en kryssruta i Word</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Hur man lägger till en kryssruta i Word för nybörjare och proffs med exempel på att spara dokumentet, rätta fel, antal ord, teckenstorlek, teckensnitt, tillämpa en stil, anpassa en stil, sidstorlek, sidmarginal, infoga sidhuvud och sidfot med mera .</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/how-add-checkbox-word"> <i class="fa fa-external-link"></i> Läs Mer</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Intressanta Artiklar</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/how-access-android-settings-menu">Hur man får åtkomst till Android-inställningsmenyn</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/propositional-logic">Propositionell logik</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/ternary-operator-java">Ternär operatör Java</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/git-rebase">Git Rebase</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/latches-digital-logic">Spärrar i digital logik</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">Populära Inlägg</h2>
<div class="content">
<ul class="list"> <li><a href="/java-list-node">listnod</a>
</li><li><a href="/alpha-beta-pruning">a-b beskärning</a>
</li><li><a href="/gimp-deselect">hur avmarkerar du i gimp</a>
</li><li><a href="/sql-composite-key">sammansatt primärnyckel</a>
</li><li><a href="/kali-linux-terminal">kali linux terminal</a>
</li><li><a href="/java-string-compare">jämförbar sträng i 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 Alla Rättigheter Förbehållna | <a href="//ja.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Ansvarsfriskrivning</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Om Oss</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Sekretesspolicy</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>