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 jest nad ramką flex. Jak to zrobić?
0
0
Nie mam pojęcia, o co pytasz. Chyba nikt nie ma.
0
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.
0
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.
0
Jeśli chcesz, żeby jedne elementy zachodziły na inne, to
- ujemne marginesy,
- albo pozycjonowanie absolutne względem kontenera.
2
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)