Flexbox a pozice určená procentem

31. 12. 2019 14:39:04

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.

31. 12. 2019 14:39:04

https://webtrh.cz/diskuse/flexbox-a-pozice-urcena-procentem/#reply1430786

Miroslav Foltyn

(3 hodnocení)

31. 12. 2019 16:10:39

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ší.

31. 12. 2019 16:10:39

https://webtrh.cz/diskuse/flexbox-a-pozice-urcena-procentem/#reply1430785

PetrP

31. 12. 2019 17:32:38

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.

31. 12. 2019 17:32:38

https://webtrh.cz/diskuse/flexbox-a-pozice-urcena-procentem/#reply1430784

Michal Jeřábek

31. 12. 2019 18:35:38

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

Nastavuje se to pomocí --offset: ;

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.

31. 12. 2019 18:35:38

https://webtrh.cz/diskuse/flexbox-a-pozice-urcena-procentem/#reply1430783

PetrP

1. 1. 2020 10:55:45

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.

1. 1. 2020 10:55:45

https://webtrh.cz/diskuse/flexbox-a-pozice-urcena-procentem/#reply1430782

Michal Jeřábek

1. 1. 2020 11:24:55

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ů).

1. 1. 2020 11:24:55

https://webtrh.cz/diskuse/flexbox-a-pozice-urcena-procentem/#reply1430781

Pavel Mareš

(19 hodnocení)

1. 1. 2020 11:26:35

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.

1. 1. 2020 11:26:35

https://webtrh.cz/diskuse/flexbox-a-pozice-urcena-procentem/#reply1430780

PetrP

1. 1. 2020 16:50:22

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.

30428

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.

1. 1. 2020 16:50:22

https://webtrh.cz/diskuse/flexbox-a-pozice-urcena-procentem/#reply1430779

Pavel Mareš

(19 hodnocení)

1. 1. 2020 17:04:30

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.

1. 1. 2020 17:04:30

https://webtrh.cz/diskuse/flexbox-a-pozice-urcena-procentem/#reply1430778

Tomáš Marek

(23 hodnocení)

1. 1. 2020 17:31:39

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ě ;)

1. 1. 2020 17:31:39

https://webtrh.cz/diskuse/flexbox-a-pozice-urcena-procentem/#reply1430777

Pavel Mareš

(19 hodnocení)

1. 1. 2020 17:36:31

Napsal streetcz;1561679
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ý.

1. 1. 2020 17:36:31

https://webtrh.cz/diskuse/flexbox-a-pozice-urcena-procentem/#reply1430776

Tomáš Marek

(23 hodnocení)

1. 1. 2020 17:41:55

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).

1. 1. 2020 17:41:55

https://webtrh.cz/diskuse/flexbox-a-pozice-urcena-procentem/#reply1430775

Pavel Mareš

(19 hodnocení)

1. 1. 2020 17:43:24

Napsal streetcz;1561682
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.

1. 1. 2020 17:43:24

https://webtrh.cz/diskuse/flexbox-a-pozice-urcena-procentem/#reply1430774

PetrP

1. 1. 2020 17:52:31

@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.

30429

@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 :)

1. 1. 2020 17:52:31

https://webtrh.cz/diskuse/flexbox-a-pozice-urcena-procentem/#reply1430773

Pavel Mareš

(19 hodnocení)

1. 1. 2020 17:55:12

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

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

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.

1. 1. 2020 17:55:12

https://webtrh.cz/diskuse/flexbox-a-pozice-urcena-procentem/#reply1430772