Erbjudanden från Amazon Prime Days!
Forum Mjukvara Programmering och digitalt skapande Tråd

Grid och Flexbox

1
Skriv svar
Permalänk
Medlem
●

Grid och Flexbox

Är detta något som är inbyggt i CSS eller bara designprinciper?

Visa signatur

Chassi: Fractal Design Define C || Processor: Intel i7-8700K || Grafikkort: ASUS GeForce GTX 1080Ti ROG Strix Gaming || Moderkort: Gigabyte Z370 AORUS ULTRA WIFI || Minne: Corsair Vengeance LPX DDR4 3000MHz 32 Gb || Lagring: Samsung 860 EVO 1TB SSD || PSU: Seasonic Focus+ 850W 85+ GOLD PSU || Skärm:Samsung Odyssey G9 || Windows 10

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Det är en del av css.
Här kan du lära dig lite om hur det fungerar:
https://flexboxfroggy.com/
https://codepip.com/games/grid-garden/

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Housepainter:

Det är en del av css.
Här kan du lära dig lite om hur det fungerar:
https://flexboxfroggy.com/
https://codepip.com/games/grid-garden/

Gå till inlägget

Tackar!

Visa signatur

Chassi: Fractal Design Define C || Processor: Intel i7-8700K || Grafikkort: ASUS GeForce GTX 1080Ti ROG Strix Gaming || Moderkort: Gigabyte Z370 AORUS ULTRA WIFI || Minne: Corsair Vengeance LPX DDR4 3000MHz 32 Gb || Lagring: Samsung 860 EVO 1TB SSD || PSU: Seasonic Focus+ 850W 85+ GOLD PSU || Skärm:Samsung Odyssey G9 || Windows 10

Redigera
Citera flera Citera
Permalänk
Medlem
●

Jag har testat lite från w3schools. I exemplet nedan kan man inte trycka ihop containern mer än en viss gräns, är det för att det är en div?

Om jag vill centrera innehållet, var sätter jag ustify-content: center?

W3Schools flexbox

Visa signatur

Chassi: Fractal Design Define C || Processor: Intel i7-8700K || Grafikkort: ASUS GeForce GTX 1080Ti ROG Strix Gaming || Moderkort: Gigabyte Z370 AORUS ULTRA WIFI || Minne: Corsair Vengeance LPX DDR4 3000MHz 32 Gb || Lagring: Samsung 860 EVO 1TB SSD || PSU: Seasonic Focus+ 850W 85+ GOLD PSU || Skärm:Samsung Odyssey G9 || Windows 10

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Larsp777:

Jag har testat lite från w3schools. I exemplet nedan kan man inte trycka ihop containern mer än en viss gräns, är det för att det är en div?

Om jag vill centrera innehållet, var sätter jag ustify-content: center?

W3Schools flexbox

Gå till inlägget

Tjo!

Testa lägg justify-content: center; nedanför display:flex; Klicka sen på "Run"-knappen.

Om du vill få den mer "hopklämd" testa lägg flex-wrap: wrap; mellan samma måsvingar ({}) som display:flex; ligger i. Varje gång du skriver/ändrar CSS-koden så måste du klicka på "Run" för att uppdatera den.

Prova sedan flex-wrap: nowrap; så kommer du inse en viktig sak med viss "CSS-regler": vissa kommer med flera standardvärden för andra CSS-regler.

Exempelvis när du först har display:flex; så kommer den också att "osynligt" ha flex-wrap: nowrap; som standardvärde om den inte "skrivs över" vilket den gör om du skriver flex-wrap: wrap; nedanför display:flex;.

Att ha flex-wrap: nowrap; direkt efter display:flex; är som att upprepa sig i detta fall. Detta är en återkommande grej med CSS så du är beredd på den kommande "huvudvärken"!

Ett annat "osynligt" standardvärde efter display:flex; - om du inte manuellt "skriver över det" - är flex-direction:row; vilket betyder att dina tre inre divs löper som en rad. Testa skriva in första och "Run" och sedan byt ut mot flex-direction:column; och "Run" så blir det andra staplade bullar!

Dessa två YT-klipp är mycket visuellt hjälpsamma för att få ett hum om Flex & Grid:

Men innan du tittar på dem, kika först på denna gällande just Flex & Grid inom CSS för detta tog mig faktiskt månader att fatta innan polletten helt plötsligt trillade ned:

Mvh,
WKF.

Visa signatur

"Den säkraste koden är den som aldrig skrivs"
"Visste du förresten att det är ett mångmiljardbolag?"
"Jag lever inte för att koda utan kodar för att sen kunna leva"

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Orsaken till att du inte kan trycka till det mera är box-modellen, dvs dina padding-värden. På utsidan är det margin-värdena som begränsar.

.flex-container {
    display: flex;
    background-color: DodgerBlue;
    justify-content: center;
}
Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av WebbkodsFrilansaren:

Tjo!

Testa lägg justify-content: center; nedanför display:flex; Klicka sen på "Run"-knappen.

Om du vill få den mer "hopklämd" testa lägg flex-wrap: wrap; mellan samma måsvingar ({}) som display:flex; ligger i. Varje gång du skriver/ändrar CSS-koden så måste du klicka på "Run" för att uppdatera den.

Prova sedan flex-wrap: nowrap; så kommer du inse en viktig sak med viss "CSS-regler": vissa kommer med flera standardvärden för andra CSS-regler.

Exempelvis när du först har display:flex; så kommer den också att "osynligt" ha flex-wrap: nowrap; som standardvärde om den inte "skrivs över" vilket den gör om du skriver flex-wrap: wrap; nedanför display:flex;.

Att ha flex-wrap: nowrap; direkt efter display:flex; är som att upprepa sig i detta fall. Detta är en återkommande grej med CSS så du är beredd på den kommande "huvudvärken"!

Ett annat "osynligt" standardvärde efter display:flex; - om du inte manuellt "skriver över det" - är flex-direction:row; vilket betyder att dina tre inre divs löper som en rad. Testa skriva in första och "Run" och sedan byt ut mot flex-direction:column; och "Run" så blir det andra staplade bullar!

Dessa två YT-klipp är mycket visuellt hjälpsamma för att få ett hum om Flex & Grid:
https://www.youtube.com/watch?v=-DNLYk5uzl8&t=1385s

https://www.youtube.com/watch?v=RhUuMl3R1PE

Men innan du tittar på dem, kika först på denna gällande just Flex & Grid inom CSS för detta tog mig faktiskt månader att fatta innan polletten helt plötsligt trillade ned:
https://www.youtube.com/watch?v=ty4lnEUy7SY

Mvh,
WKF.

Gå till inlägget
Skrivet av mc68000:

Orsaken till att du inte kan trycka till det mera är box-modellen, dvs dina padding-värden. På utsidan är det margin-värdena som begränsar.

.flex-container {
    display: flex;
    background-color: DodgerBlue;
    justify-content: center;
}
Gå till inlägget

Ok, tack så mycket båda!

Visa signatur

Chassi: Fractal Design Define C || Processor: Intel i7-8700K || Grafikkort: ASUS GeForce GTX 1080Ti ROG Strix Gaming || Moderkort: Gigabyte Z370 AORUS ULTRA WIFI || Minne: Corsair Vengeance LPX DDR4 3000MHz 32 Gb || Lagring: Samsung 860 EVO 1TB SSD || PSU: Seasonic Focus+ 850W 85+ GOLD PSU || Skärm:Samsung Odyssey G9 || Windows 10

Redigera
Citera flera Citera
Permalänk
Medlem
●

Så container är inget speciellt ord i Flexbox. D.v.s. man behöver inte döpa något till eller skriva container?

Är det display: Flex;

Som gör att det blir Flexbox?

Visa signatur

Chassi: Fractal Design Define C || Processor: Intel i7-8700K || Grafikkort: ASUS GeForce GTX 1080Ti ROG Strix Gaming || Moderkort: Gigabyte Z370 AORUS ULTRA WIFI || Minne: Corsair Vengeance LPX DDR4 3000MHz 32 Gb || Lagring: Samsung 860 EVO 1TB SSD || PSU: Seasonic Focus+ 850W 85+ GOLD PSU || Skärm:Samsung Odyssey G9 || Windows 10

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Larsp777:

Så container är inget speciellt ord i Flexbox. D.v.s. man behöver inte döpa något till eller skriva container?

Är det display: Flex;

Som gör att det blir Flexbox?

Gå till inlägget

Klassen "container" kommer från Bootstrap, så det kan vara där förvirringen ligger
https://getbootstrap.com/docs/5.0/layout/containers/

Visa signatur

| EVGA Z170 FTW | i7 6700k | ASUS RTX 3070 | 16GB DDR4 3200MHz | Cooler Master V850 | Samsung 840 Evo 250GB + 2x WD Black 500GB + Seagate 2TB SSHD + Samsung 970 Evo M.2 1TB|

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av BrutalSwede:

Klassen "container" kommer från Bootstrap, så det kan vara där förvirringen ligger
https://getbootstrap.com/docs/5.0/layout/containers/

Gå till inlägget

Ok, men det krävs ingen klasss "container"? Som jag förstår det kan i stort sett alla element vara container?

Visa signatur

Chassi: Fractal Design Define C || Processor: Intel i7-8700K || Grafikkort: ASUS GeForce GTX 1080Ti ROG Strix Gaming || Moderkort: Gigabyte Z370 AORUS ULTRA WIFI || Minne: Corsair Vengeance LPX DDR4 3000MHz 32 Gb || Lagring: Samsung 860 EVO 1TB SSD || PSU: Seasonic Focus+ 850W 85+ GOLD PSU || Skärm:Samsung Odyssey G9 || Windows 10

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Larsp777:

Ok, men det krävs ingen klasss "container"? Som jag förstår det kan i stort sett alla element vara container?

Gå till inlägget

Nej, du kan döpa dina klasser till vad som helst.

Visa signatur

| EVGA Z170 FTW | i7 6700k | ASUS RTX 3070 | 16GB DDR4 3200MHz | Cooler Master V850 | Samsung 840 Evo 250GB + 2x WD Black 500GB + Seagate 2TB SSHD + Samsung 970 Evo M.2 1TB|

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara