Mam prosty układ flex-box z pojemnikiem takim jak:
.grid {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
Teraz chcę, aby elementy w ostatnim rzędzie były wyrównane z innymi. justify-content: space-between;
należy stosować, ponieważ szerokość i wysokość siatki można regulować.
Obecnie tak wygląda
Tutaj chcę, aby element w prawym dolnym rogu znajdował się w „środkowej kolumnie”. Jaki jest najprostszy sposób na osiągnięcie tego? Oto mały jsfiddle, który pokazuje to zachowanie.
.exposegrid {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.exposetab {
width: 100px;
height: 66px;
background-color: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(0, 0, 0, 0.4);
border-radius: 5px;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
margin-bottom: 10px;
}
<div class="exposegrid">
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
</div>
css
flexbox
grid-layout
Thorben Croisé
źródło
źródło
Odpowiedzi:
Dodaj
::after
automatycznie wypełniające miejsce. Nie musisz zanieczyszczać swojego HTML. Oto kodepen, który to pokazuje: http://codepen.io/DanAndreasson/pen/ZQXLXjźródło
justify-content: space-between;
z.grid
i usunięte.grid:after
i to działa tak samo. Teraz, jeśli spróbujesz czegoś takiego , całkowicie się psuje. Zauważ, że szerokości dla każdego zestawu 4 nie sumują się do 100%. W skrzypce PO szerokości są ustawione w px, więc twoje rozwiązanie nie działa w tej sytuacji.space-between
. Jednak, kiedy ustawićflex-basis
od.grid:after
do tego samego rozmiaru jak inne przedmioty w siatce (per-przerwania, przeważające powyższy default / kod bazowy moduł), ostatni wiersz rozprzestrzeniania się prawidłowo. Wygląda na to, że działa w Safari, iOS, Firefox, Chrome (trzeba przetestować IE), a mój największy rozmiar wiersza to 3 przy mojej początkowej implementacji.{ content: "";flex: 0 0 32%;max-width: 480px;}
i zmieniłem maksymalną szerokość wraz ze zmianami zapytań o media, więc siatka była idealna dla wszystkich szerokości.Jedną z technik byłoby wstawienie pewnej liczby dodatkowych elementów (tyle, ile maksymalna liczba elementów, których można oczekiwać w rzędzie), które mają zerową wysokość. Przestrzeń jest nadal podzielona, ale zbędne wiersze zapadają się w nicość:
http://codepen.io/dalgard/pen/Dbnus
W przyszłości może to zostać osiągnięte poprzez użycie wielu
::after(n)
.źródło
Jak wspomniano w innych plakatach - nie ma czystego sposobu wyrównania do lewej strony ostatniego wiersza za pomocą Flexboksa (przynajmniej zgodnie z bieżącą specyfikacją)
Jednak za to, co jest warte: dzięki modułowi układu siatki CSS jest to zaskakująco łatwe do wytworzenia:
Zasadniczo odpowiedni kod sprowadza się do tego:
1) Ustaw element kontenera w kontener siatkowy
2) Ustaw siatkę z automatycznymi kolumnami o szerokości 100px. (Zwróć uwagę na użycie funkcji autouzupełniania (stosowanej do
auto-fit
- która (dla układu 1-wierszowego) zwija puste ścieżki do zera - powodując, że elementy rozszerzają się, aby zająć pozostałe miejsce. Spowodowałoby to uzasadnione „odstęp między 'układ, gdy siatka ma tylko jeden wiersz, który w naszym przypadku nie jest tym, czego chcemy. (sprawdź to demo, aby zobaczyć różnicę między nimi)).3) Ustaw odstępy / rynny dla rzędów i kolumn siatki - tutaj, ponieważ chcesz mieć układ „odstępu” - odstęp będzie faktycznie odstępem minimalnym, ponieważ będzie się powiększał w miarę potrzeby.
4) Podobne do Flexbox.
Pokaż fragment kodu
Codepen Demo (zmiana rozmiaru, aby zobaczyć efekt)
źródło
auto-fit
, w Chrome 57-60 wystąpił błąd (i przeglądarki oparte na jego silniku, takim jak Samsung Internet 6.0), ponieważ specyfikacja była wówczas nieco niejednoznaczna . Teraz specyfikacja została wyjaśniona, a nowe wersje Chrome są renderowaneauto-fit
poprawnie, ale przeglądarki ze starym silnikiem są nadal w użyciu, więc należy zachować ostrożność przy tej wartości.:after
pseudoelementu może prowadzić do niepożądanych wyników w przypadkach krawędzi.Bez żadnych dodatkowych znaczników, po prostu dodanie
::after
działało dla mnie, określając szerokość kolumny.Z HTML takim jak ten:
źródło
flex-basis: 10em
zamiast szerokości.Nie możesz Flexbox nie jest systemem gridowym. Nie ma konstrukcji językowych do robienia tego, o co prosisz, a przynajmniej nie, jeśli używasz
justify-content: space-between
. Najbliższe, jakie można uzyskać za pomocą Flexbox, to użycie orientacji kolumny, która wymaga ustawienia wyraźnej wysokości:http://cssdeck.com/labs/pvsn6t4z (uwaga: prefiksy nie są dołączone)
Łatwiej byłoby jednak po prostu użyć kolumn, które mają lepsze wsparcie i nie wymagają ustawiania określonej wysokości:
http://cssdeck.com/labs/dwq3x6vr (uwaga: prefiksy nie są dołączone)
źródło
Możliwym rozwiązaniem jest zastosowanie
justify-content: flex-start;
na.grid
kontenerze, ograniczeń wielkości dla jego elementów podrzędnych i marginesów na odpowiednich elementach podrzędnych - w zależności od pożądanej liczby kolumn.W przypadku siatki 3-kolumnowej podstawowy CSS wyglądałby tak:
To kolejne niedoskonałe rozwiązanie, ale działa.
http://codepen.io/tuxsudo/pen/VYERQJ
źródło
Wiem, że jest tu wiele odpowiedzi, ale .. Najprostszym sposobem na to jest
grid
użycie zamiastflex
i zagrid template columns
pomocąrepeat
orazauto fills
, gdzie musisz ustawić liczbę pikseli, które podałeś każdemu elementowi,100px
z kodu fragmentu.źródło
Tak.! Możemy, ale z pewnymi zapytaniami o media i maksymalną liczbą kolumn jest predefiniowanych .
Tutaj używam 4 kolumn. Sprawdź mój kod:
UWAGA
1) Nie ma potrzeby tworzenia div dziecka. Może to być dowolny inny znacznik, taki jak „img” r, cokolwiek chcesz.
2) Jeśli chcesz uzyskać więcej kolumn, dostosuj zapytania o media i maksymalną liczbę kolumn.
źródło
Jeśli chcesz siatkę z pewną przestrzenią między elementami i elementami rozpoczynającymi się bez początkowej spacji, to proste rozwiązanie działa:
Jeśli chcesz początkowej przestrzeni 5 pikseli, po prostu usuń ujemny margines :) Proste.
https://jsfiddle.net/b97ewrno/2/
Przyjęta odpowiedź, choć dobra, powoduje, że między elementami w drugim rzędzie nie ma miejsca.
źródło
Jeśli chcesz wyrównać ostatni element do siatki, użyj następującego kodu:
Pojemnik siatkowy
Element w siatce
Sztuczka polega na ustawieniu maksymalnej szerokości elementu równej maksymalnej szerokości .card-grid: after.
Demo na żywo na Codepen
źródło
Możliwe jest użycie „flex-start” i ręczne dodanie marginesów. Wymaga hakowania matematycznego, ale jest zdecydowanie łatwy do wykonania i ułatwia korzystanie z preprocesora CSS, takiego jak LESS.
Zobacz na przykład ten MNIEJ mixin:
A następnie można go łatwo użyć do wyświetlenia responsywnego układu siatki:
Oto przykład
http://codepen.io/anon/pen/YyLqVB?editors=110
źródło
Ten problem został dla mnie rozwiązany za pomocą siatki CSS,
To rozwiązanie ma zastosowanie tylko wtedy, gdy masz ustaloną liczbę kolumn, tj. Nie. elementów do wyświetlenia w jednym rzędzie
-> używając siatki, ale nie określając liczby wierszy, ponieważ liczba elementów zwiększa się, zawija się w kolumny i dynamicznie dodaje rzędy, w tym przykładzie podałem trzy kolumny
-> nie musisz dawać żadnej pozycji swojemu dziecku / komórce, ponieważ spowoduje to naprawę, czego nie chcemy.
źródło
Ta wersja jest najlepszym sposobem dla bloków o stałej szerokości:
http://codepen.io/7iomka/pen/oxxeNE
W innych przypadkach - wersja Dalgard
http://codepen.io/dalgard/pen/Dbnus
źródło
Istnieje sposób bez Flexboksa, chociaż musisz spełnić następujące warunki. 1) Pojemnik ma wypełnienie. 2) Przedmioty mają ten sam rozmiar i dokładnie wiesz, ile chcesz na linię.
Mniejsze wypełnienie po prawej stronie kontenera pozwala na dodatkowe wypełnienie po prawej stronie każdego elementu listy. Zakładając, że inne elementy w tym samym obiekcie nadrzędnym co obiekt listy są uzupełnione wartością 0 5%, będzie z nimi równo. Możesz także dopasować wartości procentowe do dowolnych marginesów lub użyć wartości pikseli.
Oczywiście możesz zrobić to samo bez wypełniania kontenera, używając n-child (IE 9+), aby usunąć margines na co trzecim polu.
źródło
Korzystając z Flexboksa i kilku zapytań o media, zrobiłem to małe obejście: http://codepen.io/una/pen/yNEGjv (jest trochę zhackowane, ale działa):
źródło
Zrobiłem dla niego mixin SCSS.
To jest link do codepen: http://codepen.io/diana_aceves/pen/KVGNZg
Musisz tylko ustawić szerokość elementów w procentach i liczbie kolumn.
Mam nadzieję, że ci to pomoże.
źródło
Oto kolejna para miksów scss.
Te miksy zakładają, że nie będziesz używać wtyczek js, takich jak Isotope (nie przestrzegają one kolejności znaczników html, przez co psują się nth regułami css).
Będziesz mógł w pełni z nich skorzystać, zwłaszcza jeśli najpierw piszesz swoje responsywne punkty przerwania. Najlepiej będzie użyć flexbox_grid () w mniejszym punkcie przerwania i flexbox_cell () w następujących punktach przerwania. flexbox_cell () zajmie się resetowaniem wcześniej ustawionych marginesów, które nie są już używane w większych punktach przerwania.
A tak przy okazji, dopóki poprawnie skonfigurujesz właściwości flex kontenera, możesz także użyć tylko flexbox_cell () na elementach, jeśli to konieczne.
Oto kod:
Stosowanie:
Oczywiście od Ciebie zależy ostateczne ustawienie wypełnienia / marginesu / szerokości kontenera oraz dolnych marginesów komórki i tym podobnych.
Mam nadzieję, że to pomoże!
źródło
To dość zuchwałe, ale działa dla mnie. Starałem się osiągnąć spójne odstępy / marginesy.
http://codepen.io/rustydev/pen/f7c8920e0beb0ba9a904da7ebd9970ae/
źródło
Wygląda na to, że nikt nie zaproponował rozwiązania flex-grow dla ostatniego przedmiotu. Chodzi o to, aby twój ostatni przedmiot Flex zajął tyle miejsca, ile może, używając Flex-Grow: 1.
Uwaga: To rozwiązanie nie jest idealne, szczególnie jeśli masz wyśrodkowane elementy w elementach elastycznych, ponieważ będą one wyśrodkowane na możliwie dużym ostatnim elemencie elastycznym.
źródło
Jest to kombinacja wielu odpowiedzi, ale robi dokładnie to, czego potrzebowałem - czyli wyrównuje ostatnie dziecko w elastycznym pojemniku po lewej stronie, zachowując zachowanie odstępu między nimi (w tym przypadku jest to trzykolumna układ).
Oto znaczniki:
źródło
flex-grow: 0.9
zamiastflex-basis
prac dla dowolnej liczby kolumn. Testowany w wielu nowoczesnych przeglądarkach - działa w nich wszystkich, ale wypełnienie jest uszkodzone w IE (ale działa w Edge0Zarozumiały:
Ustaw lewy margines na każdym elemencie z wyjątkiem 1, 5 i 9 elementu i tak dalej. Jeśli lewy margines wynosi 10 pikseli, wówczas każdy wiersz będzie miał margines 30 pikseli podzielony na 4 elementy. Procentowa szerokość towaru jest obliczana w następujący sposób:
Jest to przyzwoite obejście problemów dotyczących ostatniego rzędu Flexboksa.
źródło
Jeśli znasz szerokość odstępów między elementami w rzędzie i liczbę elementów w rzędzie, zadziałałoby to:
źródło
Po prostu użyj sztuczki Jquery / JavaScript, aby dodać pusty div:
źródło
Och chłopcze, myślę, że znalazłem dobre rozwiązanie z minimalnym CSS i bez JS. Sprawdź to:
Kluczem tutaj jest zapamiętanie, że to, co próbujemy osiągnąć, jest dokładnie tym, co
text-align: justify
robi!Puste elementy w kodzie HTML mają na celu idealne wyświetlanie ostatniego wiersza bez zmiany wyglądu, ale mogą nie być potrzebne, biorąc pod uwagę to, co próbujesz osiągnąć. Aby uzyskać idealną równowagę w każdej sytuacji, potrzebujesz co najmniej x-4 pustych elementów, x oznacza liczbę elementów do wyświetlenia lub n-2, n oznacza liczbę kolumn, które chcesz wyświetlić.
źródło
Wystarczy dodać kilka fałszywych przedmiotów o tych samych właściwościach, z wyjątkiem wysokości ustawionej na 0px do końca.
źródło
chcesz wyrównać
użyj
align-content: flex-start;
zamiastjustify-content: space-between;
powoduje to przesunięcie elementów z ostatniego rzędu w lewo, a także równomierne rozłożenie przestrzeni,
https://codepen.io/anon/pen/aQggBW?editors=1100
Rozwiązanie danAnderson NIE JEST DYNAMICZNE .PERİOD !!
gdy szerokość elementu zmieniła się z 25 na 28 dan anderson traci przestrzeń między obrazami
danAnderson: https://codepen.io/anon/pen/ZwYPmB?editors=1100
dynamiczny: https://codepen.io/anon/pen/aQggBW?editors=1100
to właśnie próbowałem powiedzieć. dans jest hacky .....
źródło
Byłem w stanie to zrobić
justify-content: space-between
na pojemnikuźródło