Angular Flex Layout - wyrównaj ostatnią kolumnę do lewej korzystając ze space-between

0

Witam.
Do tej pory miałem to zrobione tabelą, ale mało to responsywne, więc postanowiłem, że skorzystam z flex... Jak to zwykle bywa z CSS - "mam pełną kontrolę nad tym co styluje".

Górna część to flex, dolna to tabela. Chciałbym, aby we wersji flexowej ostatnia kolumna była wyrównana do lewej i wyglądało to mniej więcej tak jak w wersji tabelowej.
margin-right odpada, wartość jakie tam się mogą znaleźć mogą być różnej długości. Próbowałem fxLayoutAlign="space-between left", nie działa.

Jestem w ogóle w stanie uzyskać flexem ten sam efekt co tabelą?

Flex vs Table

1

Przecież text-align w elementach elastycznych nadal działa, więc w czym problem?

Ale problem polega prawdopodobnie na tym, że nip, kod pocztowy i telefon, masz tu w oddzielnych DIV-ach, którym pozwoliłeś na dość swobodne zmiany swojej długości, a przy tym ustawiłeś justify-content:space-between.

Spróbuj ustawić: justify-content:space-around,
albo wrzuć te trzy pozycje do jednego DIV-a,
ew. spróbuj ustawić flex:0 0 33%.

I pamiętaj, że jak nie pokazujesz kodu, to nie tyle pytasz o rozwiązanie konkretnego problemu, co raczej organizujesz zgaduj-zgadulę ;)

0

I pamiętaj, że jak nie pokazujesz kodu, to nie tyle pytasz o rozwiązanie konkretnego problemu, co raczej organizujesz zgaduj-zgadulę

Tak, wiem ;-)
Wrzucam całą formę jak mam to zrobione. Pierwszy raz robię w angular flex layout stąd może to wyglądać paskudnie...
Bardzo źle wyglądający kod w angular flex layout

justify-content:space-around powoduje, że centruje mi wszystko.
text-align:start niestety nic nie robi.

1

text-align:left - ale to domyślna wartość i nie z tego wynika tu problem.

Jeśli justify-content:space-around centruje ci divy, to musisz jeszcze usztywnić ich długość:
flex:0 0 33%

0

Dzięki, w angular flex layout trzeba w każdym divie ustawić procenty ile ma zajmować miejsca. Pomogło ;-)

1 użytkowników online, w tym zalogowanych: 0, gości: 1