Flexbox a pozice určená procentem

Nemůžu najít jak a jestli jde umístit div do parent divu tak, abych mohl plynule přecházet jakoby mezi flex-start a flex-end? Tedy pomocí procenta určit, jestli má být zarovnaný levý okraj, pravý okraj, nebo někde mezi. Nemusí to být nutně flexbox. Umím to nasimulovat přes javascript a šířky parenta a childa, ale přijde mi to zbytečný hack a taky nevím, jak moc je to robustní při responzivitě. Dá se to nechat na browseru? V podstatě taková obdoba background-position, ale pro div. Díky.

Je těžké pro mě přesně porozumět tomu, o co, a jakým postupem, se přesně ve vašem popisu snažíte. Co takhle nakreslit nějaký jednoduchý obrázek? Z toho to bude jasnější.

OK...viz https://codepen.io/Sipal/pen/PowJOZG - v container3 bych nějakým způsobem chtěl umístil item na základě procenta - tedy ne jen flex-start, center, flex-end, ale na libovolnou pozici mezi. 0% odpovídá flexstart, 50% center, 100% flex-end.

Nějaké možnosti: https://codepen.io/michaljerabek/pen/JjorOBo

Nastavuje se to pomocí --offset: [0-1];

Pokud je to možné, doporučuji použít variantu 3.

Také případně zvažte chování každé varianty, pokud by bylo možné, že .item bude větší než .container.

Díky moc, vypadá to funkčně :) Trochu teda tápu v principu, na kterým to je postavený, a když jsem to zkusil rozšířit na 2D (tedy pozicování nejen na šířku, ale i na výšku), tak jsem zoufale neuspěl. Není to jednoduchý s tím CSS :) No ale snad to doťuknu, každopádně díky.

S výškou je to mnohem komplikovanější, protože většinou nelze odnikud vzít 100% výšky, pokud není nastavená fixně (s vyjímkou absolutně pozicovaných elementů).

Ono by to chtělo spíš konkrétní ukázku té části projektu. Protože by pak možná někdo mohl přijít s lepším / jiným řešením, než si myslíš, že potřebuješ.

Sám jsem z úvodního popisu absolutně nepochopil pointu a nechápu, kde přesně to, co se snažíš udělat, použiješ = nevidím praktické využití. Takže reálná ukázka problému, který se snažíš vyřešit, by pomohla možná víc, než obecný popis řešení, které chceš vytvořit.

V pohodě, já to teda vezmu konkrétně. Považoval jsem to jen za trivialitu, že jsem si spíš nevšiml nějakého atributu nebo tak něco, tak jsem to nechtěl moc komplikovat. Netušil jsem, že to je tak složité, zkusím to tedy vysvětlit pořádně :).

Cílem je mít responzivní hero image (plná šířka, fixní výška) a v něm box s textem - viz obrázek.



Samozřejmě kompozice fotek je různá, a potřebuju mít možnost (konfigurovatelnou, nastavitelnou uživatelem) umístit box na různé pozice tak, aby se to vždycky zobrazovalo nějak rozumně - tedy např. v tomto případě je špatně, že text překrývá ten hlavní objekt na obrázku, a měl by se zarovnat spíš někde na levý okraj.

Obrázku umím nastavit background-position, takže resizing se chová slušně a umím zaručit, že objekt, který chci mít viditelný, se mi při resizingu nedostane mimo viditelnou oblast.

U toho boxu to ale neumím. Teď mu nastavuju flex-start, center a flex-end v obou osách, takže ho umím dostat do jednoho sektoru v mřížce 3x3, což je rozumný kompromis, ale není to dokonalé - chtěl bych tam mít možnost ten box umístit kamkoliv, aby zároveň při resizingu nikdy nevyjel z viditelné oblasti a držel si relativní pozici, odstup od krajů a podobně. Samozřejmě pokud bude větší než okno, tak smůla, ale to bych pořešil třeba zmenšením fontu - není to teď nutné řešit.

To mi přijde zbytečně složitý, nech tam mřížku 3x3 ... hrát si s % a pixelama ti pak akorát přidělá práci a efekt nebude takovej, jakej si myšlíš. Na mobilu pak tohle stejně nepoužiješ a trend na mobilu roste, takže bych nad tímhle neztrácel moc času.

Attention Required! | Cloudflare
Attention Required! | Cloudflare

Nastavíš si Align-start, Align-center nebo Align-end tím si určíš jestli bude nahoře, uprostřed nebo dole. A pak levou stranu, střed a pravou stranu nastavíš pomocí Justify-start, center a end.

Nejsem teda front-enďák, ale takhle bych to udělal já. Nevím jestli je to správně ;)

Původně odeslal streetcz ↪

Attention Required! | Cloudflare
Attention Required! | Cloudflare

Nastavíš si Align-start, Align-center nebo Align-end tím si určíš jestli bude nahoře, uprostřed nebo dole. A pak levou stranu, střed a pravou stranu nastavíš pomocí Justify-start, center a end.

Nejsem teda front-enďák, ale takhle bych to udělal já. Nevím jestli je to správně ;)

Tohle právě říkal, že už má - viz mřížka 3x3 (align-items a justify-content).

Další diskuze je o tom, že chce mít možnost jene mít 0 %, 50 % a 100 % (aka flex-start, center a flex-end) ale chce mít třeba 25 %, 13 %, 78 % (různé odsazení ze strany).

Což je z mého pohledu právě zbytečně a to start-center-end v osách X a Y mi přijde dostatečný.

PS: Jak to jde udělat ještě jinak.

Máš 2 elementy - ten bílej a pak "transparent". A právě ten transparent bude nést offest šířku kde bude potřebovat. Nebo to můžeš plácnout na parent element - % padding. Máš k dispozici i before a after element, který se daj použít třeba na tohle.

Těch možností je fakt hrozně moc, který se daj využít, ale přijde mi to zbytečně složitý.

Aha já četl jen ten poslední příspěvek. Nevím to mi přijde strašně nepraktický.

1) Bude s tím sraní (nastavování pro každý title zvlášť).
2) Přiděláš si zbytečný kód

Takhle máš prostě 9 možných pozic a jsem si jistej, že pro každej obrázek najdeš vhodnou pozici. Je to pak i chyba z pohledu designu pokud tam bude odsazení na random. Vždy je lepší mít v designu nějaký řád. Může to třeba prasácky zarovnat všechno doleva a dát margin-left: 25/13/78%; :D :D

Stejně to nezarovnáš nikdy přesně, protože jestli budeš mít background-size: cover;, tak se ti to pozadí stejně bude měnit co se pozice týče vzhledem k tomu titlu (při změně šíře okna).

Původně odeslal streetcz ↪

Nevím to mi přijde strašně nepraktický ... Je to pak i chyba z pohledu designu pokud tam bude odsazení na random. Vždy je lepší mít v designu nějaký řád ...

Jop, taky si myslím, proto sem psal, ať nechá jen mřížku 3x3 a má klid.

@Doctore97: Tam je ještě další myšlenka za tím, že user si v edit režimu ten box prostě dragne kam chce. Teď align řeším pomocí buttonů (ta hrůza přilepená na box, viz screenshot níže), funguje to, ale vypadá to hůř než ten drag :) Pomocí dragu mám vyřešený background-position u té fotky (ten žlutý terč na fotce) a je to fakt super, prostě hned vidíš jak je ta fotka umístěná. Chtěl jsem to udělat i u toho boxu. Ale dík za podporu, nechám to takhle zatím.



@streetcz: Díky, ale jak píše Doctore97, tohle už mám, jen jsem to chtěl dovést k dokonalosti. Jinak na tebe bych měl jiný dotaz, když už ses přihlásil :) Zase, možná to moc komplikuju, ale řešíme, jestli se dá zobrazit ten box se jménem, ale bez pozadí - tedy jen text na fotce. To samozřejmě naráží na problém s různě barevnými fotkami a nečitelným textem při nevhodně zvolené fotce, takže jsme to zatím vyřešili takhle. Beru to ale zase jako svým způsobem hack, podle mě by to bylo daleko hezčí bez toho pozadí, pokud bychom nějak dokázali zaručit 100% čitelnost. Tak kdybys třeba měl nápad v tomto směru :) Nebo řekni že současné řešení je naprosto v pořádku a já se tím přestanu trápit :)

Tohle je docela slušný na ukázku:

Jak správně umístit texty přes obrázky | Designui [dizajnuj]

Jinak text-shadow docela pomáhá, ale zase si musíš nějak pomoci - trochu barvy na pozadí pro kontrast textu, nebo ten celej barevnej blok jako máš ty, gradient na pozadí apod.

Jop, Lukáš to má hodně dobře vysvětlené. Já osobně bych dal box pryč a celý background přelil černou barvou (10,20,30%,..). Text měl bílou barvou. Prostě něco jak je tady to mi přijde nejelegantnější, ale samozřejmě máš hodně možností.



Tam jde o to jak velkou relevanci má ten background image. Pokud má velkou váhu a je potřeba, aby jej uživatel vždy dobře viděl, tak není dobré samozřejmě překrývat nějakou černou vrstvou a je lepší mít bg-color pod tím textem. Pokud ale slouží pouze jako doplňující obrázek k dané kategorii, tak bych to tak klidně udělal.

Mít tam gradient je taky v pohodě, ale to je použitelné pouze pokud budeš mít text dole nebo maximálně uprostřed. Nahoře to pak bude k ničemu, protože to nezlepší kontrast tomu bílému textu a ty to chceš mít i nahoře.

Dík, projdu. Ale asi to nakonec dopadne, že to tam zatím necháme s tím pozadím. Sice můžu udělat libovolný prvky na úpravu toho hero image a celé kompozice, ale zas z toho nechci mít photoshop. Musí to být něco na jeden dva kliky, aby si to useři dokázali vyladit sami, a tam je spíš lepší jednoduchost.

Pro zajímavost na čem děláš? Nějaký user-friendly webpage builder? Nechci působit pesimisticky, ale má to šanci? Je jich tu fakt mraky i na českém trhu.

@streetcz: nestíhám odpovídat :) Ta fotka je stejně důležitá jako text, není to jen výplň. Je to profil horského vůdce, má působit autoritativně a profesionálně, a ta fotka tomu velkou měrou přispívá. Počítám že reálně jich bude spousta na sněhu nebo na skalách, takže hodně bílé, modré, šedé. Proto jsme taky zvolili ten bílý box, že nebude tak moc rušit. Ale obecně samozřejmě může být na fotce cokoliv, to uvidíme až v praxi, co nám tam kdo pošle :).

Je to něco jako booking nebo tripadvisor pro horské vůdce, dost niche záležitost. https://ascendero.com . Nechtěl jsem to tu moc rozšiřovat, ale když ses zeptal napřímo... :) Dokonce jsem tě i poptával na design, ale neměl jsi kapacitu.

Vážně :D moje paměť není nic extra. Co nemám napsané to zapomenu. Listopad a prosinec jsem byl totálně zasekanej no. Až teď se to lepší, tak hodně štěstí s projektem.

V pohodě, to zas není tak důležitý. Ono je to docela velký a nevím jak je na tom dlouhodobě s kapacitou současný designér, takže je klidně možný, že se ještě ozvu.

Uveďte příklad kódu nebo náhled vašeho problému a my vám rádi pomůžeme. Váš problém souvisí s kódem, že?