Autor Zpráva
kelvin
Profil
Zkouším stylovat menu pomocí flexu, responzivně. Při určité šířce viewportu se menu zalomí tak, že celý druhý řádek zabírá poslední položka.
- Odkaz na screenshot nežádoucího chování
- Kód na https://codepen.io/kelv/pen/YEgmjP

Jak zařídit, aby poslední položka nezabírala celý řádek? Tedy aby se to rozdělilo třeba 4 položky na prvním řádku a tři položky na druhém řádku.

Pozor, není žádoucí nastavovat položkám menu stejnou šířku, na užších displejích by to místo "cihlové zdi" tvořilo sloupce a zabíralo více místa než "cihlové menu". Nevhodné sloupce při stejné šířce položek. .

Hledá se obecné řešení, ne konkrétní pro těchto sedm položek této délky textů.
Keeehi
Profil
Jedině asi takto.
Boxy jsou co nejmenší a zarovnané doleva. Jdou sice rozprostřít po celé šířce obsahu pomocí justify-content: space-between; což sice pro jeden odkaz na dalším řádku vypadá dobře, ale ne už pro dva, jelikož jeden je pak úplně vlevo a druhý úplně vpravo.
Kcko
Profil
kelvin:
Tedy aby se to rozdělilo třeba 4 položky na prvním řádku a tři položky na druhém řádku.
Jedině tak, že si ten BP určíš sám a nastavíš procentuální šíři položkám, jinak to asi nepůjde.
kelvin
Profil
Keeehi: díky, ale to není ono. Nechává to mezery vpravo i na řádcích, které mají být plné. Lepšího (subjektivně) výsledku jsem dosáhl pomocí max-width poslední položky a vycentrování na střed codepen.io/kelv/pen/RjORXO.

Ale taky to není ono, položky by měly zaplnit celý řádek, jen ne ta poslední celý.

Patrně to ve flexu nepůjde. Má někdo nápad, jak jinak by to šlo?

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: