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 |
#2 · Zasláno: 5. 12. 2017, 14:38:09
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 |
#4 · Zasláno: 5. 12. 2017, 15:48:45
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? |
||
Časová prodleva: 7 let
|
0