Logowanie

flex box kolumny - space

pytanie zadane 3 marca 2018 w HTML i CSS przez nevve Nowicjusz (170 p.)

Czy jest możliwość za pomocą flexa ustawić elementy w kolumnie czyli flex-direction: column; i jednocześnie poprzesuwać je na przemian maksymalnie do lewej i prawej strony?

1 odpowiedź

odpowiedź 3 marca 2018 przez Chess Szeryf (76,710 p.)
edycja 3 marca 2018 przez Chess

Najlepsza

Nie wiem, czy o taki efekt Ci chodziło:

ul { 
	display:flex; 
	flex-direction: column;
}
li:nth-child(2n){ 
	align-self: flex-end;
}

Możesz też napisać tak, zamiast "2n":

li:nth-child(even){

lub

li:nth-child(odd){

bądź też: li:nth-child(2n+1){

https://www.w3.org/Style/Examples/007/evenodd.en.html

<body style="background:grey">

<ul class="flex-container">
	<li class="flex-item">1</li>
	<li class="flex-item">2</li>
	<li class="flex-item">3</li>
	<li class="flex-item">4</li>
	<li class="flex-item">5</li>
	<li class="flex-item">6</li>
</ul>

</body>

Małą część kodu przepisałem z:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Edit:

Staraj się korzystać z oficjalnych dokumentacji w tym przypadku z w3.org. A tutaj link do tych selektorów pseudoklas:

https://www.w3.org/TR/2018/CR-selectors-3-20180130/#structural-pseudos

komentarz 3 marca 2018 przez nevve Nowicjusz (170 p.)

dokładnie tak, dzięki za wyjaśnienie

Podobne pytania

0 głosów

2 odpowiedzi 489 wizyt

4 divy i sekcja - Flex-box rozmieszczanie

pytanie zadane 18 sierpnia 2019 w HTML i CSS przez Radek Koniarski Użytkownik (870 p.)

0 głosów

4 odpowiedzi 348 wizyt

Prefixy a Flex Box

pytanie zadane 24 maja 2015 w HTML i CSS przez tarnasm Gaduła (3,030 p.)

+4 głosów

2 odpowiedzi 310 wizyt

Dlaczego W3C zaleca używanie zapisu flex, zamiast każdej składowej właściwości osobno?

pytanie zadane 16 września 2019 w HTML i CSS przez startCoding Obywatel (1,210 p.)

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...

flex box kolumny - space

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

1 odpowiedź

Zaloguj lub zarejestruj się, aby skomentować.

Podobne pytania

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci