Wyrównanie wierszy {align-content}
Jak ustawić bloki w wierszach na dole, na górze albo równomiernie na całej dostępnej wysokości?
CSS 3
selektor { align-content: wyrównanie }Wyrównanie:
- flex-start - wyrównanie wierszy do początkowej krawędzi kontenera
- flex-end - do końcowej krawędzi kontenera
- center - wyśrodkowanie wierszy (dla tekstu w języku polskim - w pionie)
- space-between - równe odstępy między wierszami
- space-around - równa przestrzeń wokół wierszy
- stretch - rozciągnięcie wierszy do obu krawędzi jednocześnie (domyślnie)
Polecenie steruje wyrównaniem wielu wierszy wewnątrz kontenera elastycznego, kiedy ich sumaryczna wysokość jest za mała, aby wypełnić całą dostępną przestrzeń.
Przykład {align-content}
align-content: flex-start
align-content: flex-end
align-content: center
align-content: space-between
align-content: space-around
align-content: stretch
Przeglądarki
 Chrome |  Firefox |  Edge |  Opera |  Safari | Poziom wsparcia min. 2,5 roku | |
|---|---|---|---|---|---|---|
align-content: wartość | 29 2013-08-20 | 28 2014-03-18 | 12 2015-07-29 | 16 2013-08-27 | 9 2015-09-30 |
Komentarze
Comandeer13.01.2014 21:24
Roberto: "dobrze przy małych".
np 20% z 480px - maciupkie to-to ;)
jak już taki elastyczny chcemy na mobilnych najmniejszym nakładem kosztów, to warto dorzucić min-width itd
Zobacz więcej
Roberto13.01.2014 14:38
Coś tak - dopasowuje się do wielkości ekranu.
Ale niekoniecznie będzie wyglądać dobrze przy małych/dużych ekranach.
Więc - jest to jakiś start, ale nie wszystko co potrzeba do tego.
Zobacz więcej
Gość13.01.2014 12:35
Czy to ma coś wspólnego z układami responsywnymi?
http://en.wikipedia.org/wiki/Responsive_web_design
Zobacz więcej
Sławomir Kokłowski03.03.2013 20:52
Sądzę, że bardziej niż starym Internet Explorerem należy się przejmować przeglądarkami mobilnymi, które w błyskawicznym tempie zdobywają rynek.
Zobacz więcej- Luke
03.03.2013 19:02
Nie chcę znowu zaczynać marudzić na temat IE, ale jedno jest faktem. Jeśli udział Windowsa XP nie zmniejszy się drastycznie (aktualnie wg ranking.pl ma ~35%), nie będzie można za bardzo robić układu strony na elementach nieobsługiwanych przez IE8 (które z kolei ma ~7% udziału). Dotyczy to w...
Zobacz więcej - Sławomir Kokłowski
03.03.2013 13:03
Specyfikacja CSS Flexible Box Layout Module od prawie pół roku jest w statusie kandydującej rekomendacji. Opera 12 od kilku ostatnich podwersji w 100% ją obsługuje (bez prefiksów).
Natomiast o prefiksach w deklaracjach CSS nie wspominam w Kursie właśnie dlatego, że dopóki przeglądarka nie...
Zobacz więcej - Comandeer
03.03.2013 12:52
czy przypadkiem flex-box nie jest wciąż na tyle niestabilny, że lepiej wgl go na razie pominąć? wypadałoby też wspomnieć, że inne (Webkit, nie wiem jak Firefox i IE 10) również mają jakieś tam wsparcie dla flex-boxa, ale z vendor prefixami
Zobacz więcej
