Mamy sobie kod https://jsfiddle.net/9fks1tvo/ ,którego chcemy zmodyfikować w taki sposób, żeby ramka pływająca była na fleboksie tak jak w https://jsfiddle.net/owv2s6jg/ na ramce, a w tym pierwszym kodzie float:right: jest nad ramką flex. Jak to zrobić?
Nie mam pojęcia, o co pytasz. Chyba nikt nie ma.
Chodzi oto, by ramka z float:right była na ramce fleksowej w przykładzie https://jsfiddle.net/9fks1tvo/, a nie ramka z float:right nad ramką fleksową lub z prawej strony ramki fleksowej.
A po co wgl używasz float
?
Chcesz uzyskać efekt że nachodzą na siebie częściowo?
Napisz po prostu końcowy efekt jaki chcesz uzyskać. Opisz to bez styli, po prostu słowami.
Jeśli chcesz, żeby jedne elementy zachodziły na inne, to
- ujemne marginesy,
- albo pozycjonowanie absolutne względem kontenera.
Piszesz bardzo nieskładnie, ciężko Cię zrozumieć.
W dodatku w przykładach wszędzie piszesz ten sam tekst "123", więc ciężko się odnieść i odnaleźć w Twoim kodzie.
Jeśli chcesz żeby coś było flexem ale jednocześnie coś mogło być koło niego (na przykład drugi flex) to musisz użyć inline-flex
. To odpowiednik flexa tak jak odpowiednikiem block
jest inline-block
, ale jeśli stosujesz z "width: 100%" to nie ma sensu.
Mieszanie "float" z "flex" nie polecam bo ciężko zgadnąć jak to będzie wyglądało.
Flex z jakiegoś powodu zachowuje się jakby miał na sobie "clear: both" i to powoduje że nie można go mieszać z floatem. Szczerze mówiąc nie wiem z czego takie zachowanie wynika - nie zmienia tego nawet zamknięcie w dodakowy kontener z display: block
- wygląda trochę jak bug, nie mogę się doszukać udokumentowania tego zachowania. Ale float można łatwo zastąpić - flexem albo position.
Tu masz przykład na "position: absolute":
https://jsfiddle.net/n274puya/
Do nauki flexboksów polecam flexbox froggy:
https://flexboxfroggy.com/
Mi osobiście pomogło nauczenia się flexboksów w kilka minut po kilkuletniej przerwie od frontendu (kiedy jeszcze ich nie było)