• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Css: Display Flex - jak przenienieść resztę do koleknych wierszów niżej ?

VPS Starter Arubacloud
0 głosów
1,262 wizyt
pytanie zadane 28 listopada 2019 w HTML i CSS przez owis Nowicjusz (140 p.)
edycja 28 listopada 2019 przez owis
Witajcie ekipo.

 

Zaczynam przygodę i próbuje dostować css na forum

 

Mam wygląd Kategori po lewej oraz tematów po prawej.

 

I teraz kiedy dla tych kategori ustawiam display:flex to wyświetlają się one tak fajnie bo Pionowo.

Czyli nie z góry na dół tylko od lewej do prawej.

Wszystko fajnie ale te działy wyświetlają się w nieskoczność na prawo przez co:

- po pierwsze wyjezdzają po za ekran.

- po drugie nachodzą na listę tematów.

jak zrobić aby ten FLEX działał tak jak działa ale aby przechodził do następego wiersza a nie ciągnał się nieskocznenie w prawo ? Tzn aby miał np max szerokość 500px

i dalej przechodziło niżej i znowu max 500px i dalej znowu niżej i tak tyle ile jest działów.

 

czyli jesli mam np 10 działów to chce tak:

1 dział / 2 dział / 3 dział (max 500px)  // po prawej są tematy

4 dział / 5 dział / 6 dział (max 500px)  // po prawej są tematy

 

7 dział / 8 dział / 9 dział (max 500px)  // po prawej są tematy

10 dział / pusta przestrzen (max 500px)  // po prawej są tematy

 

aktualnie mam tak:

2 Dział // Po prawej tematy

3 Dział // Po prawej tematy

4 Dział // Po prawej tematy

5 Dział // Po prawej tematy

6 Dział // Po prawej tematy

7Dział // Po prawej tematy

8 Dział // Po prawej tematy

9Dział // Po prawej tematy

10 Dział // Po prawej tematy

 

natomiast display:flex robi mi :

Dział 1/ Dział 2/ Dział 3/ Dział 4/ Dział 5 itak dalej aż najeźdza na listę tematów i po za ekran ..

 

mam nadzieje że w miarę zrozumiale wytłumaczyłem o co mi chodzi  ^^

 

dzięki

 

czyli chce aby flex mial np max 500px szerowkosc ale dalej przechodzi niżej , znowu 500px i tak dalej.

1 odpowiedź

0 głosów
odpowiedź 28 listopada 2019 przez lateM Pasjonat (17,660 p.)

flex-wrap: wrap sprawi, że jeśli elementy się nie mieszczą, to wskoczą do następnej linii. Rozrysuj to w jakimś paincie najlepiej.

komentarz 28 listopada 2019 przez owis Nowicjusz (140 p.)

Dzięki. Niestety flex-wrap : wrap nic nie zmienia czyli nawet nie robi tego co pokazuje na obrazku 2.

  1. display: flex;
  2. flex-wrap: nowrap; lub bez tego daje to co jest na obrazku drugim czyli się rozjeżdza.

Chce osiagnac efekt taki jest na obrazku 3 

Czyli to co robi samo display:flex (i widać to na obrazku 2)

ale tak aby przechodzilo do nowej lini w odpowiednim miejscu (nie wiem ale margines jak ustawiam dla tego elementu to nic nie zmienia , czy też max width to nic nie daje..)

 

Obraz 1 (tak jest oryginalnie)

Obraz 2 (tak sie robi po komendzie w przeglarce dev tools) (display:flex)

 

 

Obraz 3 (a taki chce efekt osiagnac) (wiadomo jak większy ekran to np aby po 3 Działy w jendnym rzędzie się pokazały itp) ale tak aby to najezdzalo na pole z tematami)

komentarz 28 listopada 2019 przez lateM Pasjonat (17,660 p.)
Podziel sobie to na 2 kolumny 1 - z działami, a druga z tematami. Bezpośredniemu rodzicowi tych pojedynczych "działów" nadaj zarówno display: flex; jak i flex-wrap: wrap; musi działać. Jeśli tak masz, ale nadal nie działa - to wklej kod. Rzucę okiem.
komentarz 28 listopada 2019 przez owis Nowicjusz (140 p.)
no wlasnie tylko problem w tym że z poziomu panelu administracyjnego moge jedynie edytować css i dlatego chciałem się uporać w ten sposób z tym jakoś o ile to możliwe.

aby móc edytować szablon to prawdopobnie muszę logować się przez ssh i grzebać w ruby i w dockerze a do tego chyba jeszcze za wszesnie ;/
komentarz 28 listopada 2019 przez lateM Pasjonat (17,660 p.)

Pobaw się flexem, polecam te miejsca: css-tricks oraz flexbox playground 

komentarz 29 listopada 2019 przez owis Nowicjusz (140 p.)
Ok, dzięki za pomoc tak czy siak..

pomyślałem może że to kwestia divów sąsiadujących albo rodzica. i Tutaj moje pytania.

Jeśli bawić się rodzicem dla tabeli z lewej(działy) oraz diva z prawej (tematy) - TAKI JEST UKŁAD. :

to jakim paramentrem?

jeśli jest to kwestia <tr> <table> to jaka jest opcja aby zawartość w tej tabeli nie wyjezdzala po za swoje ramy (kiedy bawie sie tym flexem to niekóre dzialy dziwnie wyjezdzaja z textem. No i tak generalnie czuje że jest to kwestia tego aby zrobić tak aby TR umiało jakoś przejść do nowego wiersza a nie wyświetlało się w całości poziomo i pionowo ( w sensie każda kolejna tabela ) - tylko jak to zrobic ??

 

jeśli to kwestia diva z prawej (czyli tematy) to może jest to kwestia jakiegos odpowiedniego position alb grid albo moze coś innego ? tzn może te cały div musi jakoś swobodnie przylegać do tej tabeli tylkoe nie wiem czy to spróbować testować. Float: left / right nic nie daje.

 

dzięki

Podobne pytania

0 głosów
1 odpowiedź 321 wizyt
pytanie zadane 9 listopada 2020 w HTML i CSS przez rob Bywalec (2,440 p.)
+1 głos
1 odpowiedź 723 wizyt
pytanie zadane 21 lipca 2021 w HTML i CSS przez Doge Gaduła (3,320 p.)
0 głosów
0 odpowiedzi 255 wizyt
pytanie zadane 8 listopada 2022 w HTML i CSS przez zbiku25 Bywalec (2,940 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...