Geriausias būdas nustatyti atstumą tarp flexbox elementų

Norint nustatyti minimalų atstumą tarp .item elementų, naudoju margin: 0 5px .item ir margin: 0 -5px konteineryje. Man tai atrodo kaip įsilaužimas, bet aš negaliu rasti geresnio būdo tai padaryti.

Pavyzdys

 <div id='box'> <div class='item'></div> <div class='item'></div> <div class='item'></div> <div class='item'></div> </div> 
476
17 дек. nustatė Sasha Koss 17 d. 2013-12-17 08:35 '13, 8:35, 2013-12-17 08:35
@ 34 atsakymai
  • 1
  • 2
  • „Flexbox“ neturi sulankstomų laukų.
  • „Flexbox“ neturi nieko panašaus į tarpines lenteles.

Todėl tai, ką prašote, yra šiek tiek sunkiau.

Mano patirtis rodo, kad „švariausias“ metodas, kuris nenaudojamas :first-child / :last-child ir veikia be jokių pakeitimų flex-wrap:wrap yra padding:5px ant konteinerio ir margin:5px vaikams, Tai sukels 10px skirtumą tarp kiekvieno vaiko ir kiekvieno vaiko bei jo tėvo.

demonstravimas

 <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> 
248
18 дек. atsakymą pateikė vartotojo652649 2013-12-18 11:31 '13, 11:31 2013-12-18 11:31

Tai nėra įsilaužimas. Tą patį metodą taip pat naudoja „bootstrap“ ir jos tinklelis, bet vietoj lauko „bootstrap“ naudoja stulpelius savo stulpeliams.

 .row { margin:0 -15px; } .col-xx-xx { padding:0 15px; } 
157
19 дек. atsakymą pateikė Roumelis George 19 d. 2014-12-19 12:52 '14, 12:52 2014-12-19 12:52

Galite naudoti skaidrias sienas.

Aš maniau šią problemą, bandau sukurti lanksčią tinklelio modelį, kuris gali būti pašalintas ant stalo + stalo modelio senesnėms naršyklėms. Ir man teko geriausias pasirinkimas latakams. t.y. >

Pavyzdžiui.

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

Taip pat atkreipkite dėmesį, kad jums reikia min-width: 50px; „flexbox“. „Flex“ modelis neveiks fiksuotų dydžių, nebent padarote flex: none; ant konkretaus vaiko elemento, kurį norite kaip fiksuotą, ir todėl neįtraukti į "flexi" . http://jsfiddle.net/GLpUp/4/ Bet visi stulpeliai su flex:none; nebėra lankstus modelis. Čia yra kažkas arčiau lankstaus modelio: http://jsfiddle.net/GLpUp/5/

Taigi, laukus galite naudoti įprastai, jei nereikia senesnės naršyklės atsarginės kopijos. http://jsfiddle.net/GLpUp/3/

background-clip: padding-box; nustatymas background-clip: padding-box; bus reikalinga naudojant foną, nes priešingu atveju fonas pateks į skaidrią sienos sritį.

74
20 дек. atsakyti į pateiktus šešioliktainius gruodžio 20 d. 2013-12-20 05:33 '13, 5:33, 2013-12-20 05:33

flexbox ir css calc ()

Sveiki, žemiau yra mano darbo sprendimas visiems naršyklėms, palaikančioms „flexbox“. Nėra neigiamų laukų, nėra hacks, apeiti, grynas Css.

Scenarijos demonstracinė versija

 <div class="flexbox"> <div>col</div> <div>col</div> <div>col</div> <div>col</div> <div>col</div> <div>col</div> </div> 
66
05 окт. atsakymas į Dariuszą Sikorski 05 okt. 2016-10-05 01:30 '16 at 1:30 2016-10-05 01:30

Atnaujinta 2019 ↓

Tai bus naudinga visais atvejais, net jei bus naudojamos kelios eilutės arba bet koks elementų skaičius.

mes naudojame display: grid; ir tai yra savybės ↓.

 <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> 

Šio metodo apversti pusę Mobile Opera Mini nepalaikys, o kompiuteryje jis veiks tik po IE11.

SAVO ATSAKYMAS ↓

Jei norite, visada galite naudoti CSS derinį :

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

Minėtas kodas padės. Nėra būtinybės taikyti šį metodą margin: 0 -5px; #box apvalkale.

Darbo pavyzdys jums ↓

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

Tikiuosi, kad tai buvo naudinga.

36
13 февр. atsakymą pateikė weBBer 13 vasaris 2018-02-13 12:44 '18, 12:44 2018-02-13 12:44

Radau sprendimą, pagrįstą „css“ selektoriu, preceded by ~ , ir leidžia inifinite lizdus.

Pažvelkite į šį švirkštimo priemonę, kad galėtumėte dirbti.

Iš esmės, stulpelio konteinerio viduje kiekvienam vaiko elementui, prieš kurį yra kitas vaiko elementas, yra viršutinė riba. Panašiai kiekvienoje eilutės talpykloje kiekvienas vaiko elementas, prieš kurį yra kitas, gauna kairę paraštę.

 <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> 
17
12 апр. Simon Epskamp atsakymas, pateiktas balandžio 12 d 2015-04-12 19:05 '15, 19:05, 2015-04-12 19:05

Perėjimas nuo atsakymo į rašymą, čia yra šiek tiek patobulinta versija, kuri leidžia nustatyti fiksuotą atstumą tarp elementų be aplinkinio lauko.

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

Taip pat įtraukta „Safari“ versija „-webkit-flex“.

 .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> 
14
12 нояб. Atsakymą pateikė chris lapkričio 12 d. 2014-11-12 13:59 '14, 13:59 2014-11-12 13:59

Pasakykite, jei norite nustatyti 10px tarpą tarp elementų, galite tiesiog nustatyti .item {margin-right:10px;} visiems ir atstatyti jį paskutiniame .item:last-child {margin-right:0;}

Taip pat galite naudoti bendrąjį brolio ~ ar kitą + brolio pasirinkimą, kad nustatytumėte kairę paraštę elementams, išskyrus pirmąjį .item ~.item {margin-left:10px;} arba naudokite .item:not(:last-child) {margin-right: 10px;}

„Flexbox“ yra toks protingas, kad automatiškai atsiskaito ir tolygiai paskirsto tinklelį.

 <div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> 
12
13 марта '16 в 2:09 2016-03-13 02:09 Atsakymas, kurį pateikė lipdukai, kovo 13 d., 16 d., 2:09 2016-03-13 02:09

Galite naudoti > * + * selektorių, kad imituotų flex-gap (viena eilutė):

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

Jei reikia palaikyti lanksčią pakuotę , galite naudoti apvalkalo elementą:

 <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> 
11
12 февр. atsakymą pateikė Do Async 12 vasaris 2018-02-12 21:17 '18, 21:17 2018-02-12 21:17

Tai naudoju stulpeliuose, turinčiuose pilną ir fiksuotą plotį. Pagrindinis raktas yra calc()

SCSS pavyzdys

 $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});} } 

Užpildykite kodo pavyzdį

9
23 дек. Atsakymą pateikė Veiko Jääger . 2014-12-23 17:05 '14, 5:05 val. 2014-12-23 17:05

Lankstus konteineris su žymeklio -x (neigiamu) ir lanksčiais elementais su x (teigiamu) lauku arba veda prie norimo vizualinio rezultato: Flex elementai turi fiksuotą tarpą tik 2x.

Atrodo, kad tai tiesiog pirmenybė, ar lankstumo elementams naudoti paraštes ar įtraukas.

Šiame pavyzdyje lanksčiosios dalys yra dinamiškai keičiamos, siekiant išlaikyti fiksuotą tarpą:

 .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; } 
9
09 нояб. Atsakymą pateikė Tim 09 Nov. 2015-11-09 19:28 '15, 19:28, 2015-11-09 19:28

Galų gale jie pridės gap nuosavybę į „flexbox“. Iki tol jūs galėtumėte naudoti CSS tinklą, kuris jau turi gap , ir tiesiog turite vieną eilutę. Nieko daryti su laukais.

6
15 февр. Atsakymas pateikiamas 15 vas. 2018-02-15 03:28 '18 at 3:28 2018-02-15 03:28

Kodėl gi ne tai padaryti:

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

Jis naudoja gretimą selektorių, kad suteiktų visus .item elementus, išskyrus pirmąjį margin-left . „Flexbox“ dėka netgi atsiranda vienodai plati elementai. Tai taip pat galima padaryti su vertikaliai išdėstytais elementais ir, be abejonės, margin-top .

4
17 апр. Atsakymą pateikia „ tillsanders“ balandžio 17 d 2016-04-17 17:44 '16 at 17:44 pm 2016-04-17 17:44

Naudodamas „Flexbox“ mano sprendime, naudoju pagrindinio elemento (konteinerio) teisingą turinį ir nurodiau laukus elementų flex-basis savybės viduje. Peržiūrėkite toliau pateiktą kodo fragmentą:

 <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> 
4
29 авг. atsakymą pateikė iClusterDev 29 rug . 2017-08-29 22:15 '17, 10:15 pm 2017-08-29 22:15

Naudojant flexbox, latakų kūrimas yra skausmas, ypač kai kalbama apie pakuotę.

Turite naudoti neigiamus laukus ( kaip parodyta klausime ):

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

... arba pakeiskite HTML ( kaip parodyta kitame atsakyme ):

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

... arba kažkas kita.

Bet kokiu atveju, jums reikia bjaurios įsilaužimo, kad jis veiktų, nes flexbox nesuteikia flex-gap funkcijos ( bent jau dabar ).

Tačiau latakų problema yra paprasta ir paprasta naudojant CSS Grid Layout.

Grid specifikacija suteikia savybes, kurios sukuria erdvę tarp tinklelio elementų, nepaisydamos erdvės tarp elementų ir konteinerio. Šios savybės yra:

  • grid-column-gap
  • grid-row-gap
  • grid-gap (trumpas abiem aukščiau nurodytoms savybėms)

Pastaruoju metu specifikacija buvo atnaujinta pagal CSS Box derinimo modulį , kuris suteikia derinimo savybių rinkinį, skirtą naudoti visuose >

  • column-gap
  • row-gap
  • gap (trumpinys)

Tačiau ne visos palaikančios „Grid“ naršyklės palaiko naujas savybes, taigi toliau pateikiamoje demonstracijoje naudosiu originalias versijas.

Be to, jei tarp elementų ir konteinerio reikia atotrūkio, pakuotė ant indo veikia tik gerai (žr. Trečiąjį pavyzdį toliau pateiktoje demonstracijoje).

Iš specifikacijos:

10.1. Latakai: row-gap , column-gap ir gap

row-gap ir column-gap savybės (ir jų gap sutrumpintas), jei tai nurodoma tinklelio talpykloje, nustatykite lataką tarp tinklelio eilių ir tinklelio stulpelių. Jų sintaksė yra apibrėžta CSS Box Alignment 3 §8 Tarpai tarp ląstelių .

Šių savybių poveikis atrodo taip, lyg paveiktos tinklelio linijos tampa storos: tinklelis tarp dviejų tinklelio linijų žymi tarp jų atstovaujančių griovelių.

 <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> 

Papildoma informacija:

3
12 февр. Atsakymą pateikė Michael_B vasario 12 d. 2018-02-12 23:39 '18, 23:39 pm 2018-02-12 23:39

Čia yra mano sprendimas, dėl kurio nereikia diegti jokių klasių vaikams:

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

Naudoti:

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

Tas pats metodas gali būti naudojamas reguliariai eilėms ir lankstumo stulpeliams, be pirmiau pateikto eilės pavyzdžio, ir pratęsiamas su klasėmis, skirtingomis ne 4px.

3
19 янв. atsakymas pateikiamas MK10 19 sausio. 2017-01-19 17:17 '17, 17:17 pm 2017-01-19 17:17

Tokiais atvejais dažnai naudoju + operatorių

 <div id='box'> <div class='item'></div> <div class='item'></div> <div class='item'></div> <div class='item'></div> </div> 
3
25 мая '18 в 23:10 2018-05-25 23:10 atsakymą wutzebaer davė gegužės 25 d. 18 val. 23:10 2018-05-25 23:10

Columnify - „N“ stulpelių solo klasė

„Flexbox“ ir „SCSS“

 .columnify { display: flex; > * { flex: 1;  { margin-left: 2rem; } } } 

„Flexbox“ ir „CSS“

 <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> 

Žaiskite su juo JSFiddle .

2
10 нояб. Atsakymas pateikiamas zurfyx 10 lapkričio. 2017-11-10 13:08 '17 at 13:08 pm 2017-11-10 13:08

Tiesiog naudokite .item +.item pasirinktuve, kad atitiktų antrąjį

 <div id='box'> <div class='item'></div> <div class='item'></div> <div class='item'></div> <div class='item'></div> </div> 
2
12 янв. Atsakymą pateikė Andrew Luca sausio 12 d. 2018-01-12 01:37 '18 prie 1:37 2018-01-12 01:37

Yra tikrai gražus, tvarkingas, tik CSS būdas tai padaryti (kuris gali būti laikomas „geresniu“).

Iš visų čia pateiktų atsakymų atradau tik vieną, kuris sėkmingai naudoja „Calc“ () (Dariusz Sikorski). Tačiau, kai kalbama apie: "bet tai nepavyksta, jei paskutinėje eilutėje yra tik 2 elementai", sprendimas nebuvo pratęstas.

Šis sprendimas išsprendžia OP klausimą su alternatyva neigiamoms sritims ir sprendžia Dariauszui iškilusią problemą.

pažymi:

  • Šis pavyzdys rodo tik trijų stulpelių išdėstymą.
  • Jis naudoja skaičiuoklę calc() , kad naršyklėje atliktų matematiką, kaip jis nori - 100%/3 (nors 33,3333% turėtų veikti taip pat), ir (1em/3)*2 (nors ir taip pat turėtų veikti gerai).
  • Jis naudoja ::after kad užpildytų paskutinę eilutę, jei yra mažiau elementų nei stulpeliai.

 <h2>Example 1 (2 elements)</h2> <div class="flex-container"> <div>1</div> <div>2</div> </div> <h2>Example 2 (3 elements)</h2> <div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> </div> 

Taip pat apsilankykite https://codepen.io/anon/pen/rqWagE

1
07 окт. Atsakymas suteiktas lygiavertės sumos 07 okt. 2018-10-07 21:04 '18, 09:04 val. 2018-10-07 21:04

Radau įsilaužimą, nes man tai tikrai reikia.

 <div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> 

Čia taip pat yra stulpelio tinklelis su gražiu lankstumo sluoksniu. Manau, jums patiks. Peržiūrėti Codepen

1
12 апр. Kevino Cosmos atsakymas balandžio 12 d 2018-04-12 10:02 '18, 10:02 am 2018-04-12 10:02

Čia yra žemėlapio sąsajos elementų tinklelis su intervalu, užpildytu lanksčiu >

2019

Tikiuosi, kad tai padės žmonėms, esantiems ir ateityje.

03 авг. atsakymas suteiktas buildpax 03 rug . 2017-08-03 09:44 '17 at 9:44 2017-08-03 09:44

Lanksčių elementų tarpas nustatomas tik jų konteinerio nustatyta kryptimi. Pvz., Jei lanksčiojo konteinerio konteineris yra srautas iš kairės į dešinę ( flex-direction:row ), aš nustatysiu savo vaikams tik teisingą paraštę, išskyrus paskutinį:

 .flex-lr{ display:flex; flex-direction:row; } .flex-lr > *:not(:last-child){ margin-right:5px; } 

Jis gali dirbti iš pirmo žvilgsnio, bet palaukite! tai neturėtų būti padaryta, jei justify-content parametras yra nustatytas kitam, kuris yra start arba end , nes visos kitos vertės jau savaime skiria erdvę.

O kas, jei daiktai sukasi? Tada turime pridėti erdvę į atitinkamą skersinės ašies pusę. Bet kaip jūs žinote, ar konteineriui leidžiama leisti savo vaikams? Ką apie wrap-reverse ?

Visi šie argumentai privertė mane manyti, kad tai nėra triviška užduotis, ir tai reikalauja nedidelio žingsnio.

Mano požiūris grindžiamas trumpu klasių rinkiniu, kuris veikia kaip lanksčiojo dėžės apvalkalas. Tai turi tam tikrų privalumų:

  1. Tai leidžia „centralizuoti“ visus pardavėjo prefiksus viename taške ir pamiršti apie tai.
  2. Tai leidžia grupuoti „flexbox“ savybes į vieną klasę arba netgi pervadinti kai kurias „flexbox“ naudojamas formuluotes, kurios kartais gali neatrodyti labai intuityvios (IMHO).
  3. Jei naudoju šias klases, galiu parašyti kitas klases, remdamasis jų remiamų lankstumo savybių vertėmis. Pvz., Galėčiau nustatyti tarpą pagal srauto kryptį, skersinės ašies išlygiavimą, vyniojimą ir kt.

Baigiau sukurti „flexbox“ dizainerį, kad galėčiau žaisti su visa tai, suprasti save (ir kitus), kaip veikia „flexbox“, ir kaip puikiai veikia „flexbox“. „Plese“ nedvejodami naudokite ją žemiau esančioje nuorodoje:

http://algid.com/Flex-Designer

Taigi, žemiau rasite ir pieškite klases, kurias naudoju, ir atstumo vertę (paraštę) vienam srauto krypčiai. Galite padaryti išvadą apie kitus arba rasti juos aukščiau esančioje nuorodoje. Pardavėjo prefiksai trumpai buvo atsisakyta.

  .flex-lr{display:flex; flex-direction:row;} .flex-tb{display:flex; flex-direction:column;} .flex-rl{display:flex; flex-direction:row-reverse;} .flex-bt{display:flex; flex-direction:column-reverse;}  .wrap{flex-wrap:wrap;} .nowrap{flex-wrap:nowrap;} .wrap-rev{flex-wrap:wrap-reverse;}  .align-start{justify-content:flex-start;} .align-end{justify-content:flex-end;} .align-center{justify-content:center;} .align-between{justify-content:space-between;} .align-around{justify-content:space-around;} .align-evenly{justify-content:space-evenly;}  .cross-align-start{align-items:flex-start;} .cross-align-end{align-items:flex-end;} .cross-align-center{align-items:center;} .cross-align-stretch{align-items:stretch;} .cross-align-baseline{align-items:baseline;}  .wrap-align-start{align-content:flex-start;} .wrap-align-end{align-content:flex-end;} .wrap-align-center{align-content:center;} .wrap-align-stretch{align-content:stretch;} .wrap-align-between{align-content:space-between;} .wrap-align-around{align-content:space-around;}  .item-cross-align-start{align-self:flex-start;} .item-cross-align-end{align-self:flex-end;} .item-cross-align-center{align-self:center;} .item-cross-align-stretch{align-self:stretch;} .item-cross-align-baseline{align-self:baseline;} .item-cross-align-auto{align-self:auto;}