[Roballo]

Jak we flexbox/css zrobić takie coś bez absolute? by napis zawsze był na środku, a przycisk zamknij (z prawej)?

#webdev #flexbox #css

[veranoo]

@Roballo: align-content?

[Chanandler]

@Roballo: https://jsfiddle.net/xczeykL6/

[Roballo]

@veranoo: to mi sie rozjezdza potem, a musze miec ten napis konkretnie na srodku, a tamto zawsze z prawej do konca

[Roballo]

@Chanandler: czerwony kwadrat musi byc klikalny i w tamtym miejscu konkretnie( ͡° ʖ̯ ͡°)

[veranoo]

@Roballo: to są dwa buttony rozumiem?

[Roballo]

@veranoo: tylko jeden z prawej, z lewej span.
@Marmite: już patrzę

[emtei]

@Marmite: Ale u Ciebie napis "Udostępnij" nie jest na środku ekranu.

[Marmite]

@emtei: e, źle zrozumiałem. Ale coś podobnego co OP chce też już robiłem, muszę zerknąć jak to zrobiłem

[Marmite]

@Roballo: w sumie to niedużo trzeba poprawić, o ile znasz szerokość tego elementu po prawej - wystarczy zawartość elementu po lewej przesunąć o tę samą szerokość w prawo.
https://codepen.io/anon/pen/aKZdNr
cc @emtei:

jak nie znasz to będzie trochę więcej zabawy, więc to jest kluczowa informacja ( ͡° ͜ʖ ͡°)

[Roballo]

@Marmite: o to już ratuje, teraz tylko wertykalnie muszę ustawić na środku bo coś mi tam psuje

[Marmite]

@Roballo: to dlatego, że flex teraz steruje pozycjonowaniem kontenerów, a nie ich treści. Więc trzeba sobie jeszcze wyśrodkować treść w tych kontenerach i żeby to zrobić nadałem im odpowiednie line-height. Widzę, że zapomniałem o vertical-align: middle, ale to chyba nic nie zmieniło ( ͡° ͜ʖ ͡°)

[Roballo]

@Marmite: musiałem dać height:100% dla tych boxów bo nie łapało i teraz tekst wisi na górze

[Roballo]

@Marmite: ogarnąłem, dziękuje! ;) muszę poczytać o tej magii flex-grow