Modalitate mai bună de a seta distanța dintre flexbox elemente

Pentru a seta distanța minimă între flexbox elemente I'm folosind `margin: 0 5px "pe".element " și " margin: 0 -5px pe recipient. Pentru mine pare un hack, dar nu pot't găsi nici o modalitate mai bună de a face acest lucru.

[Exemplu][1] 

#box {
  display: flex;
  width: 100px;
  margin: 0 -5px;
}
.item {
  background: gray;
  width: 50px;
  height: 50px;
  margin: 0 5px;
}
<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>
Salman A
Întrebarea editată 3 decembrie 2018 в 7:27
Programare
css3 css flexbox
17 decembrie 2013 в 5:35
12 vizualizări
Comentarii la întrebare (12)
Soluția
  • Flexbox nu't au restrângerea marjelor.
  • Flexbox nu't au nimic asemănător cu `border-spacing pentru mese (cu excepția proprietate CSS "golul" care e't de bine susținut în cele mai multe browsere, caniuse)

Prin urmare, realizarea de ce imi ceri tu este un pic mai dificil.

În experiența mea, "curat" dar't folosi:first-child/:last-childși funcționează fără nici o modificare pe-flex folie:folie este stabilit padding:5px pe recipient și margin:5px pe copii. Asta va produce o 10px decalaj între copii și între copii și părinții lor.

[Demo](http://jsfiddle.net/7XD8s/)

.upper
{
  margin:30px;
  display:flex;
  flex-direction:row;
  width:300px;
  height:80px;
  border:1px red solid;

  padding:5px; /* this */
}

.upper > div
{
  flex:1 1 auto;
  border:1px red solid;
  text-align:center;

  margin:5px;  /* and that, will result in a 10px gap */
}

.upper.mc /* multicol test */
{flex-direction:column;flex-wrap:wrap;width:200px;height:200px;}
<div class="upper">
  <div>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa<br/>aaa</div>
  <div>aaa<br/>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa</div>
</div>

<div class="upper mc">
  <div>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa<br/>aaa</div>
  <div>aaa<br/>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa</div>
</div>
Flimm
Răspuns editat 21 septembrie 2019 в 3:42
Comentarii (9)

Acest lucru nu este un hack. Aceeași tehnică este, de asemenea, utilizate de bootstrap și rețeaua sa, deși, în loc de marjă, bootstrap folosește umplutură pentru coloane.

.row {
  margin:0 -15px;
}
.col-xx-xx {
  padding:0 15px;
}
Comentarii (6)

flexbox și css calc()

Salut, mai jos este munca mea de o soluție pentru toate browserele de sprijin flexbox. Nu marjelor negative, nu hacks, nu soluții, pur Css.

[Vioara Demo][1]

<div class="flexbox">
  <div>col</div>
  <div>col</div>
  <div>col</div>
  <div>col</div>
  <div>col</div>
  <div>col</div>
</div>

.flexbox { display: flex; flex-direcție: rând; -flex folie: folie; justifica-conținut: spațiu-între; }

.flexbox > div {
  /*
    1/3  - 3 columns per row
    10px - spacing between columns 
  */
  box-sizing: border-box;
  margin-bottom: 10px;
  outline: 1px dotted red;
  width: calc(1/3*100% - (1 - 1/3)*10px);
}
Alex Nolasco
Răspuns editat 24 septembrie 2019 в 3:53
Comentarii (5)

Puteți utiliza frontiere transparente.

Trebuie avute în vedere această problemă în timp ce încercarea de a construi un flex grid model care poate reîntoarcerii la un mese + masa-model celular pentru browsere mai vechi. Și Frontiere pentru coloana jgheaburi mi sa părut cea mai bună alegere potrivită. de exemplu, Tabelul-celule don't avea margini.

de exemplu

.column{
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid transparent;
}

De asemenea, rețineți că aveți nevoie min-width: 50px; pentru flexbox. Flex model nu se va ocupa de dimensiuni fixe, dacă nu vei face flex: nici unul; pe copil special elementul pe care doriți ca fix și, prin urmare, excluse de la"flexi". http://jsfiddle.net/GLpUp/4/ Dar toate coloanele împreună cu flex:none; este nu mai un flex model. Aici este ceva mai aproape de un flex model: http://jsfiddle.net/GLpUp/5/

Astfel încât să puteți folosi de fapt, marjele, în mod normal, dacă nu't nevoie de masă de celule de rezervă pentru browsere mai vechi. http://jsfiddle.net/GLpUp/3/

Setarea de fundal-clip: padding-box;` va fi necesar atunci când se utilizează un fundal, ca altfel fundal va curge în transparent zona de frontieră.

Comentarii (9)

Acest lucru va lucra pentru toate cazurile, chiar dacă există mai multe rânduri sau orice număr de elemente.

Suntem folosind [display: grid;]1 și proprietățile sale.

#box {
  display: grid;
  width: 100px;
  grid-gap: 5px;
  /* Space between items */
  grid-template-columns: 1fr 1fr 1fr 1fr;
  /* Decide the number of columns and size */
}

.item {
  background: gray;
  width: 100%;
  /* width is not necessary only added this to understand that width works as 100% to the grid template allocated space **DEFAULT WIDTH WILL BE 100%** */
  height: 50px;
}
<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

Dezavantajul acestei metode este în Mobile Safari nu vor fi acceptate și în PC-ul funcționează numai după IE10.

Notă pentru a finaliza compatibilitate browser-ul, inclusiv IE11 vă rugăm să folosiți Autoprefixer

RĂSPUNS VECHI

Don't cred că de ea ca o soluție vechi, l's încă una dintre cele mai bune, dacă doriți doar un singur rând de elemente și se va lucra cu toate browserele.

Această metodă este folosită de CSS frate combinație, astfel încât să puteți manipula multe alte moduri, de asemenea, dar în cazul în care combinația este greșit, aceasta poate provoca, de asemenea, probleme.

.item+.item{
  margin-left: 5px;
}

Codul de mai jos va face truc. În această metodă, nu este nevoie de a da margin: 0 -5px; a #cutie înveliș.

O probă de lucru pentru tine:

#box {
  display: flex;
  width: 100px;
}
.item {
  background: gray;
  width: 22px;
  height: 50px;
}
.item+.item{
 margin-left: 5px;
}
<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>
weBBer
Răspuns editat 31 octombrie 2019 в 5:25
Comentarii (2)

Puteți folosi& > + ca un selector pentru a emula un flex gap- (pentru o singură linie):

#box { display: flex; width: 230px; outline: 1px solid blue; }
.item { background: gray; width: 50px; height: 100px; }

/* ----- Flexbox gap: ----- */

#box > * + * {
  margin-left: 10px;
}
<div id='box'>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
</div>

Dacă aveți nevoie pentru a sprijini flex ambalaj, puteți folosi un element de înveliș:

.flex { display: flex; flex-wrap: wrap;  }
.box { background: gray; height: 100px; min-width: 100px; flex: auto; }
.flex-wrapper {outline: 1px solid red; }

/* ----- Flex gap 10px: ----- */

.flex > * {
  margin: 5px;
}
.flex {
  margin: -5px;
}
.flex-wrapper {
  width: 400px; /* optional */
  overflow: hidden; /* optional */
}
<div class='flex-wrapper'>
  <div class='flex'>
    <div class='box'></div>
    <div class='box'></div>
    <div class='box'></div>
    <div class='box'></div>
    <div class='box'></div>
  </div>
</div>
TylerH
Răspuns editat 21 august 2019 в 1:09
Comentarii (0)

Las's spun dacă doriți să setați 10px spațiu între elemente, puteți seta doar .element {margin-dreapta:10px;} pentru toate, și resetați-o pe ultima.element:last-child {margin-right:0;}`

Puteți folosi, de asemenea, general frate ~ sau viitoare + frate selector pentru a seta marginea din stânga pe elementele cu excepția primul .articol ~ .element {margin-left:10px;} sau de a folosi .articol:nu(:last-child) {margin-dreapta: 10px;}

Flexbox este atât de inteligent încât se recalculează automat și la fel de distribuie grila.

body {
  margin: 0;
}

.container {
  display: flex;
}

.item {
  flex: 1;
  background: gray;
  height: 50px;
}

.item:not(:last-child) {
  margin-right: 10px;
}
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Dacă doriți să permiteți flex folie, consultați următorul exemplu.

body {
  margin: 0;
}

.container {
  display: flex;
  flex-wrap: wrap;
  margin-left: -10px;
}

.item {
  flex: 0 0 calc(50% - 10px);
  background: gray;
  height: 50px;
  margin: 0 0 10px 10px;
}
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
Comentarii (2)

Am găsit o soluție care se bazează pe general frate selector, ~, și vă permite infinit de cuibărit.

A se vedea acest cod pen pentru un exemplu de lucru

Practic, în interiorul coloanei de containere, fiecare copil care este precedat de un alt copil devine o marginea de sus. De asemenea, în fiecare container rând, fiecare copil care este precedată de o altă devine o marja de stânga.

.box {
  display: flex;
  flex-grow: 1;
  flex-shrink: 1;
}

.box.columns {
  flex-direction: row;
}

.box.columns>.box~.box {
  margin-left: 5px;
}

.box.rows {
  flex-direction: column;
}

.box.rows>.box~.box {
  margin-top: 5px;
}
<div class="box columns">
  <div class="box" style="background-color: red;"></div>
  <div class="box rows">
    <div class="box rows">
      <div class="box" style="background-color: blue;"></div>
      <div class="box" style="background-color: orange;"></div>
      <div class="box columns">
        <div class="box" style="background-color: yellow;"></div>
        <div class="box" style="background-color: pink;"></div>
      </div>
    </div>
    <div class="box" style="background-color: green;"></div>
  </div>
</div>
TylerH
Răspuns editat 21 august 2019 в 1:09
Comentarii (2)

Se deplasează pe la sawa's a răspunde, aici's o versiune ușor îmbunătățită care vă permite să setați un fix distanța dintre elementele fără marjă înconjurătoare.

http://jsfiddle.net/chris00/s52wmgtq/49/

De asemenea, este inclusă Opera "-webkit-flex" versiune.

.outer1 {
    background-color: orange;
    padding: 10px;
}

.outer0 {
    background-color: green;
    overflow: hidden;
}

.container
{
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;    
    -webkit-flex-wrap: wrap;
    background-color: rgba(0, 0, 255, 0.5);
    margin-left: -10px;
    margin-top: -10px;
}

.item
{
    flex-grow: 1;
    -webkit-flex-grow: 1;
    background-color: rgba(255, 0, 0, 0.5);
    width: 100px;
    padding: 10px;
    margin-left: 10px;
    margin-top: 10px;
    text-align: center;
    color: white;
}

<div class="outer1">
    <div class="outer0">
        <div class="container">
            <div class="item">text</div>
            <div class="item">text</div>
            <div class="item">text</div>
            <div class="item">text</div>
            <div class="item">text</div>
            <div class="item">text</div>
        </div>
    </div>
</div>
Comentarii (1)

O flex container cu -x (negativ) marja și flex elemente cu x (pozitiv) marja sau căptușeală ambele conduce la vizual dorit rezultat: Flex elemente au o fix decalaj de 2x numai între fiecare alte.

Acesta pare a fi pur și simplu o chestiune de preferință, dacă doriți să utilizați margin sau padding pe flex elemente.

În acest exemplu, flex elemente sunt scalate în mod dinamic, în scopul de a păstra fix decalaj:

.flex-container { 
  margin: 0 -5px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.flex-item {
  margin: 0 5px; // Alternatively: padding: 0 5px;
  flex: 1 0 auto;
}
Comentarii (3)

Am folosit acest lucru pentru înfășurat și lățime fixă coloane. Cheia aici este calc()

SCSS eșantion

$gap: 10px;

dl {
  display: flex;
  flex-wrap: wrap;
  padding: $gap/2;

  dt, dd {
    margin: $gap/2;}

  dt { // full width, acts as header
    flex: 0 0 calc(100% - #{$gap});}

  dd { // default grid: four columns 
    flex: 0 0 calc(25% - #{$gap});}

  .half { // hall width columns
    flex: 0 0 calc(50% - #{$gap});}

}

Full Codepen eșantion

Comentarii (3)

În cele din urmă se va adăuga un " gol " proprietatea de a flexbox. Pana atunci ai putea folosi CSS grid loc care are deja un " gol " de proprietate, și au doar un singur rând. Mai frumos decât de-a face cu marje.

Comentarii (1)

Cu flexbox, crearea de jgheaburi este o durere, mai ales atunci când ambalajul este implicat.

Ai nevoie de a utiliza marjele negativ (așa cum se arată în întrebarea):

#box {
  display: flex;
  width: 100px;
  margin: 0 -5px;
}

... sau modifica HTML (după cum se arată într-un alt răspuns):

<div class='flex-wrapper'>
  <div class='flex'>
    <div class='box'></div>
    <div class='box'></div>
            ...
  </div>
</div>

... sau altceva.

În orice caz, ai nevoie de un urât hack pentru a face să funcționeze pentru că flexbox nu't oferi un "-flex gap" caracteristică (cel puțin pentru moment).

Problema de jgheaburi, cu toate acestea, este simplu și ușor cu CSS Grid Layout.

Grila spec oferă proprietăți care creează spațiu între elementele de rețea, în timp ce ignoră spațiu între elemente și recipient. Aceste proprietăți sunt:

  • grid-coloana-gap
  • grid-rând-gap
  • grid-gap (pe scurt, atât pentru proprietățile de mai sus)

Recent, spec a fost actualizat pentru a se conforma cu CSS Box-Modul de Aliniere, care oferă un set de aliniere proprietăți pentru utilizarea pe toate modele de cutii. Astfel de proprietăți sunt acum:

  • coloana-gap
  • row-gap
  • un " gol " (prescurtare)

Cu toate acestea, nu toate Grid-sprijinirea browsere suport pentru cele mai noi proprietăți, așa că am'll utiliza versiunile originale în demo-ul de mai jos.

De asemenea, dacă distanța este nevoie de între elemente și container, padding pe recipient functioneaza foarte bine (a se vedea cel de-al treilea exemplu, în demo-ul de mai jos).

De la spec.:

10.1. Jgheaburi: a row-decalaj, coloana-gap " și " gap proprietăți

`row-gap " și "coloana diferența de proprietăți (și lor un" gol " prescurtare), atunci când este specificată într-o grilă recipient, pentru a defini jgheaburi între grilă rânduri și coloane de rețea. Sintaxa lor este definită în CSS Caseta Aliniere 3 §8 Golurile Dintre Cutii.

efectul acestor proprietăți este ca și cum afectate linii de grilă dobândite grosime: rețea de cale între două linii de grilă este spațiul între jgheaburi care le reprezintă.

.box {
  display: inline-grid;
  grid-auto-rows: 50px;
  grid-template-columns: repeat(4, 50px);
  border: 1px solid black;
}

.one {
  grid-column-gap: 5px;
}

.two {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.three {
  grid-gap: 10px;
  padding: 10px;
}

.item {
  background: lightgray;
}
<div class='box one'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

<hr>

<div class='box two'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

<hr>

<div class='box three'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

Mai multe informații:

Comentarii (0)

Folosind Flexbox în soluția mea am've justifica-conținut proprietate pentru elementul părinte (container) și am'am specificat marginile în interiorul flex-baza proprietăți ale elementelor. Verifica fragmentul de cod de mai jos:

.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  margin-bottom: 10px;
}

.item {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #999;
}

.item-1-4 {
  flex-basis: calc(25% - 10px);
}

.item-1-3 {
  flex-basis: calc(33.33333% - 10px);
}

.item-1-2 {
  flex-basis: calc(50% - 10px);
}
<div class="container">
  <div class="item item-1-4">1</div>
  <div class="item item-1-4">2</div>
  <div class="item item-1-4">3</div>
  <div class="item item-1-4">4</div>
</div>
<div class="container">
  <div class="item item-1-3">1</div>
  <div class="item item-1-3">2</div>
  <div class="item item-1-3">3</div>
</div>
<div class="container">
  <div class="item item-1-2">1</div>
  <div class="item item-1-2">2</div>
</div>
Comentarii (0)

Aici's my soluție, care nu't nevoie de stabilirea unor clase pe copilul elemente:

.flex-inline-row {
    display: inline-flex;
    flex-direction: row;
}

.flex-inline-row.flex-spacing-4px > :not(:last-child) {
    margin-right: 4px;
}

Utilizare:

<div class="flex-inline-row flex-spacing-4px">
  <span>Testing</span>
  <span>123</span>
</div>

Aceeași tehnică poate fi folosită pentru normal flex rânduri și coloane în plus față de inline exemplul dat mai sus, și a extins-cu clase de spațiere, altele decât 4px.

Comentarii (0)

De ce nu-mi place acest lucru:

.item + .item {
    margin-left: 5px;
}

Aceasta folosește adiacente frate selector, pentru a da toate .element elemente, cu excepția primului, o marja de stânga. Datorită flexbox, asta chiar rezultate în mod egal largă de elemente. Acest lucru ar putea fi, de asemenea, face cu elemente poziționate vertical și margin-top, desigur.

Comentarii (1)

De multe ori am folosi operatorul + pentru astfel de cazuri

#box {
  display: flex;
  width: 100px;
}
.item {
  background: gray;
  width: 50px;
  height: 50px;
}
.item + .item {
    margin-left: 5px;
}
<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>
Comentarii (0)

Am găsit cel mai simplu mod de a face acest lucru este cu procente și doar permițându-marja de socoteala ta lățime

Acest lucru înseamnă că se încheie cu ceva de genul asta daca ai de unde, folosind exemplul tau

#box {
   display: flex;
}

.item {
   flex: 1 1 23%;
   margin: 0 1%;
}

Nu înseamnă valorile tale sunt bazate pe lățimea deși care ar putea să nu fie bine pentru toată lumea.

Comentarii (1)

CSS "golul" de proprietate:

Există o nou "gol" proprietate CSS pentru multi-coloană, flexbox, și machete de rețea care funcționează în unele browsere acum! (A se vedea Pot folosi link 1; link 2). 

#box {
  display: flex;
  width: 100px;
  background-color: red;
  gap: 10px;
}
.item {
  background: gray;
  width: 50px;
  height: 50px;
}
<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

Ca de scris, acest lucru funcționează doar în Firefox, din păcate.

TylerH
Răspuns editat 22 octombrie 2019 в 2:52
Comentarii (0)

Columnify - Un solo de clasă pentru N coloane

Flexbox și SCSS

.columnify {
  display: flex;

  > * {
    flex: 1;

    &:not(:first-child) {
      margin-left: 2rem;
    }
  }
}

Flexbox și CSS

.columnify {
  display: flex;
}

.columnify > * {
  flex: 1;
}

.columnify > *:not(:first-child) {
  margin-left: 2rem;
}
<div class="columnify">
  <div style="display: inline-block; height: 20px; background-color: blue;"></div>
  <div style="display: inline-block; height: 20px; background-color: blue"></div>
  <div style="display: inline-block; height: 20px; background-color: blue"></div>
</div>

Joaca-te cu pe [JSFiddle][1].

Comentarii (0)