Aby ustawić minimalną odległość między elementami schematu flexbox używam margin: 0 5px
na .item
i margin: 0 -5px
na pojemniku. Dla mnie to wygląda na hack, ale nie mogę znaleźć lepszego sposobu na zrobienie tego.
#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>
row-gap: 5px
- zrobione.gap
nieruchomości na pojemnikach typu flex ( caniuse )Odpowiedzi:
border-spacing
tabel (z wyjątkiem właściwości CSS,gap
która nie jest dobrze obsługiwana w większości przeglądarek, caniuse )Dlatego osiągnięcie tego, o co prosisz, jest nieco trudniejsze.
Z mojego doświadczenia wynika, że „najczystszym” sposobem, który nie używa
:first-child
/:last-child
i działa bez żadnych modyfikacji,flex-wrap:wrap
jest ustawieniepadding:5px
kontenera imargin:5px
dzieci. To stworzy10px
lukę między każdym dzieckiem a między każdym dzieckiem a ich rodzicem.Próbny
źródło
order
zestaw właściwości?:first-child/:last-child
nie będzie działać zgodnie z oczekiwaniami.To nie jest hack. Ta sama technika jest również używana przez bootstrap i jego siatkę, jednak zamiast marginesu, bootstrap używa wypełnienia dla swoich cols.
źródło
height:100%; width:100%
ignoruje dopełnienie elementu.flex-basis
wartości nie uwzględniająbox-sizing: border-box
, więc dziecko z dowolnym dopełnieniem lub ramką przepełni nadrzędny (lub zawinie w tym przypadku). ŹródłoFlexbox i css calc z obsługą wielu rzędów
Witaj, poniżej jest moje działające rozwiązanie dla wszystkich przeglądarek obsługujących Flexbox. Brak ujemnych marż.
Fiddle Demo
Uwaga: ten kod może być krótszy przy użyciu SASS
Aktualizacja 2020.II.11 Wyrównane kolumny w ostatnim wierszu po lewej stronie
Aktualizacja 2020.II.14 Usunięto margines na dole w ostatnim wierszu
źródło
justify-content
.justify-content: space-evenly;
lubjustify-content: space-around;
.Możesz użyć przezroczystych ramek.
Rozważałem ten problem, starając się zbudować model elastycznej siatki, który może wrócić do modelu tabeli + komórki-komórki dla starszych przeglądarek. A granice dla rynien kolumnowych wydawały mi się najlepszym wyborem. tzn. komórki tabeli nie mają marginesów.
na przykład
Pamiętaj też, że potrzebujesz
min-width: 50px;
Flexboksa. Model flex nie będzie obsługiwał stałych rozmiarów, chyba że wykonaszflex: none;
określony element podrzędny, który chcesz ustawić jako stały, a zatem nie będzie on istniał"flexi"
. http://jsfiddle.net/GLpUp/4/ Ale wszystkie kolumny razem z nimiflex:none;
nie są już modelem elastycznym. Oto coś bliższego modelowi flex: http://jsfiddle.net/GLpUp/5/Tak więc możesz właściwie używać marginesów normalnie, jeśli nie potrzebujesz rezerwowania komórek tabeli w starszych przeglądarkach. http://jsfiddle.net/GLpUp/3/
Ustawienie
background-clip: padding-box;
będzie konieczne podczas korzystania z tła, ponieważ w przeciwnym razie tło przepłynie do przezroczystego obszaru obramowania.źródło
background-clip: padding-box
To rozwiązanie będzie działać we wszystkich przypadkach, nawet jeśli jest wiele wierszy lub dowolna liczba elementów. Ale liczba sekcji powinna być taka sama, jak chcesz 4 w pierwszym rzędzie, a 3 to drugi rząd, to nie będzie działać w ten sposób, że miejsce na 4. zawartość będzie puste, pojemnik nie będzie wypełniony.
Używamy
display: grid;
i jego właściwości.Minusem tej metody jest to, że w Mobile Opera Mini nie będzie obsługiwana, a na PC działa to tylko po IE10 .
Uwaga: aby uzyskać pełną zgodność przeglądarki, w tym IE11, użyj Autoprefixera
STARA ODPOWIEDŹ
Nie myśl o tym jako o starym rozwiązaniu, wciąż jest jednym z najlepszych, jeśli chcesz mieć tylko jeden rząd elementów i będzie działać ze wszystkimi przeglądarkami.
Ta metoda jest używana przez kombinację rodzeństwa CSS , więc możesz nią manipulować również na wiele innych sposobów, ale jeśli twoja kombinacja jest zła, może również powodować problemy.
Poniższy kod załatwi sprawę. W tej metodzie nie ma potrzeby, aby dać
margin: 0 -5px;
do#box
owinięcia.Działająca próbka dla Ciebie:
źródło
grid-template-columns
co definiujemy nie dynamicznie. Więc jeśli podasz wartość,1fr 1fr 1fr 1fr
to podzieli div4fractions
i spróbuje wypełnić elementy potomne w każdymfractions
, według mojej wiedzy, jest to jedyny sposóbgrid
. To, co powiedziałem w odpowiedzi, jest takie, że jeśli użytkownik będzie musiał podzielić div na 4 i używać ich z wieloma elementami, nawet dla wielu wierszy,gid
pomoże.Możesz użyć
& > * + *
jako selektora do emulacjiflex-gap
(dla pojedynczej linii):Jeśli potrzebujesz obsługi elastycznego owijania , możesz użyć elementu opakowania:
źródło
*
operator nie zwiększa specyficzności, jak można się spodziewać. Tak więc w zależności od istniejącego css może być konieczne zwiększenie specyficzności.flex > *
selektora lub dodanie!important
do reguły, jeśli istnieją inne selektory stosujące margines do tego elementu.Powiedzmy, że jeśli chcesz ustawić
10px
odstęp między przedmiotami, możesz po prostu ustawić.item {margin-right:10px;}
dla wszystkich i zresetować go na ostatnim.item:last-child {margin-right:0;}
Możesz także użyć selektora rodzeństwa ogólnego
~
lub następnego+
rodzeństwa, aby ustawić lewy margines na elementach z wyjątkiem pierwszego.item ~ .item {margin-left:10px;}
lub użyj.item:not(:last-child) {margin-right: 10px;}
Flexbox jest tak sprytny, że automatycznie przelicza i równo rozprowadza siatkę.
Jeśli chcesz zezwolić na owijanie flex , zobacz następujący przykład.
źródło
:last-child
nie wpływa to na każde ostatnie dziecko na końcu linii, prawda?Znalazłem rozwiązanie oparte na ogólnym selektorze rodzeństwa
~
i umożliwiające nieskończone zagnieżdżanie.Zobacz ten kodowy długopis jako działający przykład
Zasadniczo w kontenerach kolumnowych każde dziecko poprzedzone innym dzieckiem otrzymuje górny margines. Podobnie, w każdym kontenerze wiersza każde dziecko poprzedzone innym otrzymuje lewy margines.
źródło
Przechodząc od odpowiedzi Sawy, oto nieco ulepszona wersja, która pozwala ustawić stały odstęp między przedmiotami bez otaczającego marginesu.
http://jsfiddle.net/chris00/s52wmgtq/49/
Dołączona jest również wersja Safari „-webkit-flex”.
źródło
Według #ChromDevSummit istnieje implementacja
gap
właściwości Flexboksa, chociaż w tej chwili (14 listopada 2019 r.) Jest ona obsługiwana tylko w Firefoksie, ale wkrótce powinna zostać zaimplementowana w Chrome:Demo na żywo
Zaktualizuję swoją odpowiedź, gdy tylko przejdzie do Chrome.
źródło
Użyłem tego do kolumn owiniętych i o stałej szerokości. Kluczem jest tutaj
calc()
Próbka SCSS
Pełna próbka Codepen
źródło
Elastyczny pojemnik z -x (ujemna) margines i giętkie elementy z x (liczba dodatnia) marginesu lub impregnowanie zarówno prowadzić do żądanego efektu końcowego: elementy Flex ma ustaloną wielkość szczeliny 2X jedynie między sobą.
Wydaje się, że jest to po prostu kwestia preferencji, czy użyć marginesu czy wypełnienia na elementach elastycznych.
W tym przykładzie elementy elastyczne są skalowane dynamicznie w celu zachowania stałej szczeliny:
źródło
W końcu dodadzą
gap
właściwość do Flexbox. Do tego czasu możesz użyć siatki CSS, która ma jużgap
właściwość i mieć tylko jeden wiersz. Ładniejsze niż zajmowanie się marżami.źródło
gap
Właściwość CSS :Dodano nową
gap
właściwość CSS dla układów wielokolumnowych, flexbox i układów siatki, która działa teraz w niektórych przeglądarkach! (Zobacz Czy mogę użyć linku 1 ; link 2 ).W chwili pisania to działa tylko w Firefoksie. Obecnie działa w Chrome, jeśli włączysz „Włącz eksperymentalne funkcje platformy internetowej”
about:flags
.źródło
Korzystając z Flexboksa w moim rozwiązaniu, użyłem
justify-content
właściwości elementu nadrzędnego (kontenera) i określiłem marginesy wewnątrzflex-basis
właściwości elementów. Sprawdź fragment kodu poniżej:źródło
Dzięki Flexbox tworzenie rynien jest uciążliwe, szczególnie gdy chodzi o owijanie.
Musisz użyć ujemnych marginesów ( jak pokazano w pytaniu ):
... lub zmień HTML ( jak pokazano w innej odpowiedzi ):
... albo coś innego.
W każdym razie potrzebujesz brzydkiego hacka, aby działał, ponieważ Flexbox nie zapewnia funkcji „
flex-gap
” ( przynajmniej na razie ).Problem z rynnami jest jednak prosty i łatwy dzięki CSS Grid Layout.
Specyfikacja siatki zapewnia właściwości, które tworzą przestrzeń między elementami siatki, ignorując przestrzeń między elementami a kontenerem. Te właściwości to:
grid-column-gap
grid-row-gap
grid-gap
(skrót dla obu nieruchomości powyżej)Ostatnio specyfikacja została zaktualizowana, aby była zgodna z CSS Box Alignment Module , który zapewnia zestaw właściwości wyrównania do użytku we wszystkich modelach pudełek. Więc właściwości są teraz:
column-gap
row-gap
gap
(stenografia)Jednak nie wszystkie przeglądarki obsługujące Grid obsługują nowsze właściwości, więc użyję oryginalnych wersji w poniższej wersji demonstracyjnej.
Ponadto, jeśli potrzebny jest odstęp między przedmiotami a pojemnikiem,
padding
na pojemniku działa dobrze (patrz trzeci przykład w pokazie poniżej).Ze specyfikacji:
Więcej informacji:
źródło
Dlaczego nie zrobić tego w ten sposób:
Używa sąsiedniego selektora rodzeństwa , aby dać wszystkie
.item
elementy, z wyjątkiem pierwszego amargin-left
. Dzięki Flexbox uzyskuje się nawet równie szerokie elementy. Można to również zrobić z elementami ustawionymi pionowo imargin-top
oczywiście.źródło
Oto moje rozwiązanie, które nie wymaga ustawiania żadnych klas na elementach potomnych:
Stosowanie:
Tę samą technikę można zastosować do normalnych elastycznych wierszy i kolumn oprócz przykładu śródliniowego podanego powyżej i rozszerzyć o klasy dla odstępów innych niż 4px.
źródło
W takich przypadkach często używam operatora +
źródło
Uważam, że najłatwiej to zrobić za pomocą wartości procentowych i po prostu pozwalając marginesowi na wyrównanie szerokości
Oznacza to, że skończysz z czymś takim, jeśli korzystasz z przykładu
Oznacza to, że twoje wartości są oparte na szerokości, co może nie być dobre dla wszystkich.
źródło
Oto siatka elementów interfejsu użytkownika karty z odstępami wypełnionymi za pomocą elastycznego pudełka:
Byłem sfrustrowany ręcznym rozmieszczaniem kart przez manipulowanie marginesami i marginesami z niepewnymi wynikami. Oto kombinacje atrybutów CSS, które uważam za bardzo skuteczne:
Mam nadzieję, że to pomaga ludziom, teraźniejszości i przyszłości.
źródło
Columnify - klasa solo dla N kolumn
Flexbox i SCSS
Flexbox i CSS
Graj z nim na JSFiddle .
źródło
źródło
Wystarczy użyć
.item + .item
selektora, aby dopasować od sekundy.item
źródło
Zarozumiały:
Ustaw lewy margines na każdym elemencie, z wyjątkiem 1., 5., 9. i tak dalej; i ustaw stałą szerokość dla każdego elementu. Jeśli lewy margines wynosi 10 pikseli, wówczas każdy wiersz będzie miał margines 30 pikseli między 4 elementami, procentową szerokość elementu można obliczyć w następujący sposób:
Jest to przyzwoite obejście problemów dotyczących ostatniego rzędu Flexboksa.
źródło
Jest naprawdę przyjemny, schludny, tylko CSS sposób na zrobienie tego (można to uznać za „lepsze”).
Ze wszystkich zamieszczonych tutaj odpowiedzi znalazłem tylko taką, która z powodzeniem korzysta z funkcji calc () (autor: Dariusz Sikorski). Ale gdy postawiono na: „ale to się nie powiedzie, jeśli w ostatnim rzędzie są tylko 2 elementy”, żadne rozwiązanie nie zostało rozwinięte.
To rozwiązanie odpowiada na pytanie PO jako alternatywy dla ujemnych marż i rozwiązuje problem postawiony Dariuszowi.
uwagi:
calc()
aby pozwolić przeglądarce na matematykę tak, jak chce -100%/3
(chociaż 33,3333% powinno równie dobrze działać) i(1em/3)*2
(chociaż .66em powinien również działać dobrze) .::after
do wypełniania ostatniego wiersza, jeśli jest mniej elementów niż kolumnRównież na https://codepen.io/anon/pen/rqWagE
źródło
Możesz skorzystać z nowej właściwości
gap
. Kopiuję, wklejam wyjaśnienie, które znalazłem w tym artykule , a także więcej informacjiNiestety obecnie tylko FireFox obsługuje luki w układach elastycznych.
źródło
gap
było już zalecane w odpowiedzi tutaj stackoverflow.com/a/58041749/2756409 Ponadto nie jest to CSS.Nie będzie to działać w każdym przypadku, ale jeśli masz elastyczne szerokości potomne (%) i znasz liczbę elementów w rzędzie, możesz bardzo dokładnie określić marginesy niezbędnych elementów, używając
nth-child
selektora / ów.Zależy to w dużej mierze od tego, co rozumiesz przez „lepszy”. W ten sposób nie wymaga dodatkowego znacznika opakowania dla elementów potomnych lub elementów ujemnych - ale oba te elementy mają swoje miejsce.
źródło
Natrafiłem wcześniej na ten sam problem, a potem natknąłem się na odpowiedź na to pytanie. Mam nadzieję, że pomoże to innym w przyszłości.
długa odpowiedź krótka, dodaj ramkę do elementów elastycznych dziecka. następnie możesz określić marginesy między elementami elastycznymi do tego, co chcesz. We fragmencie używam czarnego do celów ilustracyjnych, możesz użyć „przezroczystego”, jeśli chcesz.
źródło
Sztuczka z ujemnym marginesem na kontenerze pudełkowym działa po prostu świetnie. Oto kolejny przykład świetnie działający z zamówieniem, pakowaniem i co nie.
źródło