Dir hat diesen Tutorial gefallen? Das CSS Box Model ist ebenfalls ein wichtiges Thema, wo zumindest ich damals meine Probleme hatte: ua-cam.com/video/PeU6K9vsBNw/v-deo.html
Danke, wirklich! Ich muss in einem Uni-Projekt eine Webseite machen und bin am CSS-Teil verzweifelt. Keine anderen Videos waren so verständlich, ausführlich und hatten so gute Erklärungen. Dank dir klappt es jetzt.
Vielen lieben Dank Mario. Endlich habe ich es verstanden. Dafür bin ich dir sehr dankbar. Sehr verständlich und in Ruhe erklärt. Freu mich auf noch mehr Videos von Dir.
Vielen lieben Dank für deine motivierenden Worte! 1M+ Abos klingen total utopisch, haha xD Freut mich das ich dir weiterhelfen konnte, das ist mir Lohn genug ;-)
Vielen Dank für dieses Video. Bin gestern fast wahnsinnig geworden mit CSS. Hab es mit Position und float nicht hinbekommen. Werde jetzt mit dem erlernten mein Glück probieren.
noar endlich ma en Dudoriel, was in meiner Muddersprache verfassd is. Kurz, prägnant und verständlich erklärt, so muss das! Ich binge mal dein Kanal durch. :)
So nützlich zu können aber dennoch für den totalen Anfang schwerer zu verstehen. Dank deiner Hilfe und den anderen Videos jedoch verstehe ich die Zusammenhänge und auch was genau für ein Segen ist um Klassen direkt zu bennen/ mit css anzusprechen.
Genial vielen lieben Dank an Dich Mario. Du machst echt sehr hilfreiche, gut verständliche Videos und hilft mir beim Selbststudium gut weiter 🙂. Einfach und in der ruhigen Anfängerfreundlichen Art erklärt. Mögen deine Abbo Zahlen steigen, proportional wie du sie verdient hast🙂.
Klasse Video. Hilt mir. Danke! Ich benutze jetzt 3 geschachtelte Grid's. Werde jetzt aber die 2 Inneren durch Flexbox ersetzen. Ich benutze zum ersten Mal Icon's von Google Material Design. Würde auch einen interessanten Inhalt für ein Video abgeben.
Sehr gut und nachvollziehbar erklärt. Danke dafür. Ich würde gerne die Flexbox für ein "Kachel-Menü" nutzen (ähnlich WINDOWS 10). Wie kann ich in die einzelnen Kacheln am einfachsten den jeweiligen Link einbauen?
Echt klasse erklärt, aber eine Frage, wie geht das, dass dein Browser sich automatisch aktualisiert während du am codieren bist? Ich muss immer auf refresh drucken um die Änderungen zu sehen.
Du erklärst das wirklich gut und ich habe auch alles soweit verstanden. Allerdings funktioniert es dennoch bei mir nicht, ich habe 5 Elemente, die wie in deinem Video unschön in der ersten Zeile zusammen geschoben werden. Jedes mal, wenn ich dann flex-wrap: wrap; eingebe haut er mir alle Elemente untereinander in 5 Reihen auf die gesamte Breite des Containers direkt aneinander.
Mit wrap werden die Elemente senkrecht zur Schreibrichtung umgebrochen. Wenn jetzt bei dir jedes Element die volle Breite beansprucht liegt das offensichtlich an anderen Eigenschaften die du verwendest. Was hast du denn noch für die flex items angegeben?
Auf den ersten Blick könnte es an dem width von 500px liegen. Hier brauchen ja allein wenn nur 2 items nebeneinander angezeigt werden sollen 1000px zur Verfügung. Generell machen feste Pixelwerte meistens Probleme wenn nicht genügend Platz vorhanden ist. Auch für die Höhe würde ich keine festen werte vergeben. Der container hat 800px und jedes Element hat 500px. Du hast 5 Stück davon. Je offener alles ist je flexibler ist es ;)
Und jetzt habe ich mal alles aus der .container gelöscht und nur display: flex; eingegeben. Jetzt ist wieder alles nebeneinander, gebe ich nun aber wieder flex-wrap: wrap; ein, klatscht er wieder alles direkt untereinander mit der gesamten Breite des Containers. Ich bin echt am verzweifeln.....kann der Fehler vielleicht noch in der HTML irgendwo liegen?
Kann ich einzelne items auch ausrichten? Beispielsweise habe ich einen header und darin eine Überschrift und eine nav. Somit enthält der Container header zwei items nämlich h1 und nav. Kann ich das erste item linksbündig und das zweite zentriert darstellen oder muß ich den Container als Grid organisieren?
Hast du es mal versucht? Je nach Layout kann das gut funktionieren. Neben den 2 Hauptelementen kannst du ja die darin enthaltenen Kindelemente ebenfalls frei positionieren.
Hallo danke für das Tutorial, das hat mir endlich geholfen Flexbox etwas besser zu verstehen :) Mirs aufgefallen Wenn du eine Änderung im Editor machst, wird die sofort im Browser übernommen. Hast du ein Add-on oder wie funktioniert das bei dir?
Wie du die einzelnen Elemente anordnen kannst zeige ich im Video ab der Minute 3:00 Bezüglich der Größen dann ab Minute 6:18 Aber du kannst darüber hinaus natürlich die items auch ganz normal via width/height in der Größe exakt definieren etc.
Wieder mal ein tolles Video. Danke dir. Aber ich habe da eine Frage. Nehmen wir mal an ich habe ein Container mit fünf Elementen. Vier Elemente sind Links und das letzte ein Button. Schreibe dann das: .... display: flex; justify-content:flex-start;. usw. Nun möchte ich aber nur das letzte Element viel weiter nach rechts verschieben. Mario wie mach ich das unter Flexbox?
Gebe dem letzten Element die Eigenschaft margin-left: auto und lasse die Magie auf dich wirken. Wenn ich dich richtig verstanden habe sollte das so klappen, falls nicht irgendwas anderes bei dir dazwischen funkt. 🙂
@@ProgrammierenMario Ich habe das vierte Element die Eigenschaft margin-right: 550px; gegeben. Und siehe da das fünfte Element hat sich nach rechts verschoben. Aber dafür ist die Navigation nicht mehr responsive.
Hallo Mario, ist es möglich Flexbox mit Grid zu kombinieren oder eher nicht? Wie sieht es grundsätzlich aus, wenn man Flexbox und Grid kombiniert, falls dies möglich ist/wäre bei responsiven Websites? Muss man dann z.B. Grid und Flexbox 'einzeln' mit @media ansprechen, damit die Website passend gemacht werden kann? Danke und Gruss, Peter
Beides zusammen in einem Element lässt sich nicht kombinieren. Aber du könntest z. B. mit Grid den groben Rahmen des Layouts definieren. Einzelne Elemente innerhalb eines Grid-Items dann mit Flexbox ausrichten.
Learning bei Doing, schon immer und zu jeder Zeit. Egal was ich nebenher noch so mache um bedrucktes Papier zu erhalten welches Viele für wichtig halten. 😉
@@ProgrammierenMario Wow, hätte ich nicht gedacht. Bildung ist wichtig, aber ich denke Unternehmen wollen wissen was du kannst was ein Diplom nicht machen kann.
@@myytkn8526 Richtig, zumindest in diesem Bereich ist das eigentlich vollkommen egal welches Papier du vorzeigst. Seit ich in diesem Beruf tätig bin herrscht immer und überall ein Mangel an Leuten. Zu anderen Bereichen kann ich nichts sagen.
Halllo Mario. ich hab mir das tutorial jetzt mehrfach angesehen, aber komm damit noch nicht so recht klar. worauf bezieht sich flex genau? nehmen wir an, ich hab nen div, header oder nav beispielsweise. darin hab ich items, die ich individuell gestalten möchte. bezieht sich dann flex auf die erste ebene also auf nav etc oder kann man sich das ganze als ebenen System sehen?
Hi, flex bezieht sich hier auf die direkten auf die Elemente die sich direkt darunter befinden (Kindelemente), und zwar nur die die direkt darunter liegen, nicht auf die die weiter verschachtelt darunter liegen. Wenn du jetzt aber auch hier die Elemente mit flex positionieren möchtest musst du den Kindelementen wiederum die Eigenschaft flex geben, da sich diese Eigenschaft nur auf die items bezieht die direkt darunter liegen. Hoffe das hilft dir erstmal weiter ;)
![CSS Grid Tutorial Deutsch für Anfänger [30+ Minuten]](http://i.ytimg.com/vi/uFKvg-vXI98/mqdefault.jpg)
Dir hat diesen Tutorial gefallen? Das CSS Box Model ist ebenfalls ein wichtiges Thema, wo zumindest ich damals meine Probleme hatte: ua-cam.com/video/PeU6K9vsBNw/v-deo.html
sehr sauber erklärt, danke!
Gern geschehen 🙂
Danke, wirklich! Ich muss in einem Uni-Projekt eine Webseite machen und bin am CSS-Teil verzweifelt. Keine anderen Videos waren so verständlich, ausführlich und hatten so gute Erklärungen. Dank dir klappt es jetzt.
Das freut mich sehr!
Richtig gut und übersichtlich erklärt. Etwas zu können und etwas zu lehren sind hier auf UA-cam und Co. selten so gut vereint. Danke dafür. 🤝
Freut mich, danke! Wenn du zu CSS Flexbox weitere Beispiele brauchst, dazu habe ich hier ein Video gemacht --> ua-cam.com/video/9ssl_ERVKOQ/v-deo.html
Vielen lieben Dank Mario. Endlich habe ich es verstanden. Dafür bin ich dir sehr dankbar. Sehr verständlich und in Ruhe erklärt. Freu mich auf noch mehr Videos von Dir.
Freut mich sehr!
Super erklärt. 👏👏
Flexbox ist ja ein mächtiges Hilfsmittel. Danke.
Bitte mehr davon.
Danke für dein Feedback ✌️🙂
Ich verstehe nicht, warum du nicht 1.000.000+ Abonnenten hast - - du erklärst Sachen wahnsinnig gut, man VERSTEHT endlich um was es geht! Thx!!
Vielen lieben Dank für deine motivierenden Worte! 1M+ Abos klingen total utopisch, haha xD
Freut mich das ich dir weiterhelfen konnte, das ist mir Lohn genug ;-)
Das Video hat mir sehr weiter geholfen, sehr gut erklärt und ich habe das einfach mal so wie gezeigt abgetippt.
Freut mich sehr das ich dir weiterhelfen konnte ✌
Das wichtigste css-Thema überhaupt, wie ich finde. Und supergut erklärt.
Vielen Dank ✌️🙂
Danke lieber Mario! Deine Videos haben mir viele Stunden der Suche erspart. Ich liebe Sachsen 🥰
Sehr schön! Freut mich ✌️🙂
Danke Mario! 🙂 Deine Videos helfen mir sehr! Du kannst sehr gut erklären, besser als mein Lehrer.
Ich versuche mein Bestes, danke fürs reinschauen ✌️🙂
Vielen Dank für dieses Video. Bin gestern fast wahnsinnig geworden mit CSS. Hab es mit Position und float nicht hinbekommen. Werde jetzt mit dem erlernten mein Glück probieren.
Wünsche dir viel Erfolg 👍
noar endlich ma en Dudoriel, was in meiner Muddersprache verfassd is. Kurz, prägnant und verständlich erklärt, so muss das! Ich binge mal dein Kanal durch. :)
Das freut mich! xD
Danke!
Bitte und Vielen Dank 🙂
deine videos sind unglaublich hilfreich . ich muss sagen vielen dank Mario .
Danke für das Lob!
So nützlich zu können aber dennoch für den totalen Anfang schwerer zu verstehen. Dank deiner Hilfe und den anderen Videos jedoch verstehe ich die Zusammenhänge und auch was genau für ein Segen ist um Klassen direkt zu bennen/ mit css anzusprechen.
Das freut mich sehr!
Ich mag deine Videos. Das hilft ein immer weiter.
Na dann hat es sich ja gelohnt 👍
Danke, das mir sehr weitergeholfen:-)
Freut mich sehr ✌️
Das war super, und beste Grüße nach Sachsen, ihr seid die Besten!
Vielen lieben Dank! Und beste Grüße an dich zurück :)
Klasser erklärt, endlich mal eine vernünftige Erklärung :D
Herzlichen Dank und Grüße... ✌️🙂
Super erklärt! Vielen Dank :)
Gern geschehen ✌
du hilfst einem wirklich weiter :)
Gerne! Freut mich wenn ich helfen kann :)
unfassbar gut
Vielen Dank ✌️🙂
Danke! Das ist flexitastisch! ;-)
Herzlichen Dank!
Grossartig alles zu 100% gepasst
Super das es gepasst hat 🙂
Sehr gut erklärt! Danke dafür!
Gern geschehen!
Klasse. Wie immer super erklärt. Besten Dank.
Danke für das Lob!
Gut erklärt!
Danke fürs Feedback!
Genial vielen lieben Dank an Dich Mario. Du machst echt sehr hilfreiche, gut verständliche Videos und hilft mir beim Selbststudium gut weiter 🙂. Einfach und in der ruhigen Anfängerfreundlichen Art erklärt. Mögen deine Abbo Zahlen steigen, proportional wie du sie verdient hast🙂.
Vielen herzlichen Dank :)
Hey ho Mario, danke für Deine megageilen Tutorials ♥
Sehr gerne!
Sehr sehr gut erklärt, Danke Mario.
Freut mich ganz dolle das ich dir damit helfen konnte ;-)
Dankeschön! Sehr gut und einfach erklärt.
Freut mich sehr das ich dir mit diesem Video helfen konnte. 🙂
Dich hätte ich gerne als Professor :) Deine Videos helfen mir wirklich extrem weiter! Vielen Dank!
Freut mich wenn ich helfen kann :)
Sehr gut erklärt! Du hast mir bei meiner klausur wirklich weitegeholfen👍😊 direkt abonniert und nen like verpasst👊🗯
Freut mich das dir mein Tutorial weitergeholfen hat. Vielen Dank für dein Feedback ;-)
Danke fürs reinschauen ✌️🙂
Danke
Bitte 😉
Klasse Video. Hilt mir. Danke! Ich benutze jetzt 3 geschachtelte Grid's. Werde jetzt aber die 2 Inneren durch Flexbox ersetzen.
Ich benutze zum ersten Mal Icon's von Google Material Design. Würde auch einen interessanten Inhalt für ein Video abgeben.
Besten Dank! 3 verschachtelte Grid's klingt auf jeden fall spannend. Happy Coding ;-)
Sehr gut und nachvollziehbar erklärt. Danke dafür. Ich würde gerne die Flexbox für ein "Kachel-Menü" nutzen (ähnlich WINDOWS 10). Wie kann ich in die einzelnen Kacheln am einfachsten den jeweiligen Link einbauen?
Du kannst den anker tag auch um ein div Element legen, dann ist das gesamte Element verlinkt. Das könnte dann auch so eine Kachel sein.
@@ProgrammierenMario Danke für die schnelle Antwort!
Echt klasse erklärt, aber eine Frage, wie geht das, dass dein Browser sich automatisch aktualisiert während du am codieren bist? Ich muss immer auf refresh drucken um die Änderungen zu sehen.
Schau mal nach Live Server. Ist eine Extension für VS Code.
Du erklärst das wirklich gut und ich habe auch alles soweit verstanden. Allerdings funktioniert es dennoch bei mir nicht, ich habe 5 Elemente, die wie in deinem Video unschön in der ersten Zeile zusammen geschoben werden. Jedes mal, wenn ich dann flex-wrap: wrap; eingebe haut er mir alle Elemente untereinander in 5 Reihen auf die gesamte Breite des Containers direkt aneinander.
Mit wrap werden die Elemente senkrecht zur Schreibrichtung umgebrochen. Wenn jetzt bei dir jedes Element die volle Breite beansprucht liegt das offensichtlich an anderen Eigenschaften die du verwendest. Was hast du denn noch für die flex items angegeben?
@@ProgrammierenMario danke für deine schnelle Reaktion, ich schicke dir hier einfach mal die .container und .items:
.container {
display: flex;
border: 5px solid black;
height: 800px;
background-color: rgb(252, 38, 0);
flex-wrap: wrap;
flex-direction: row;
}
.item {
background-color: white;
text-align: justify;
width: 500px;
height: 500px;
Auf den ersten Blick könnte es an dem width von 500px liegen. Hier brauchen ja allein wenn nur 2 items nebeneinander angezeigt werden sollen 1000px zur Verfügung. Generell machen feste Pixelwerte meistens Probleme wenn nicht genügend Platz vorhanden ist. Auch für die Höhe würde ich keine festen werte vergeben. Der container hat 800px und jedes Element hat 500px. Du hast 5 Stück davon. Je offener alles ist je flexibler ist es ;)
@@ProgrammierenMario hab es raus genommen, aber es ändert sich nichts :-)
Und jetzt habe ich mal alles aus der .container gelöscht und nur display: flex; eingegeben. Jetzt ist wieder alles nebeneinander, gebe ich nun aber wieder flex-wrap: wrap; ein, klatscht er wieder alles direkt untereinander mit der gesamten Breite des Containers. Ich bin echt am verzweifeln.....kann der Fehler vielleicht noch in der HTML irgendwo liegen?
Kann ich einzelne items auch ausrichten? Beispielsweise habe ich einen header und darin eine Überschrift und eine nav. Somit enthält der Container header zwei items nämlich h1 und nav. Kann ich das erste item linksbündig und das zweite zentriert darstellen oder muß ich den Container als Grid organisieren?
Hast du es mal versucht? Je nach Layout kann das gut funktionieren. Neben den 2 Hauptelementen kannst du ja die darin enthaltenen Kindelemente ebenfalls frei positionieren.
Hallo danke für das Tutorial, das hat mir endlich geholfen Flexbox etwas besser zu verstehen :)
Mirs aufgefallen Wenn du eine Änderung im Editor machst, wird die sofort im Browser übernommen. Hast du ein Add-on oder wie funktioniert das bei dir?
Und noch eine weitere Frage wofür, also in welchen Fällen will man denn die Flex-Direction ändern?
Freut mich sehr das ich dir weiterhelfen konnte. Ich nutze für VS Code die Erweiterung Live Server.
Wie kann ich item 2 und 3 neben item 1 anordnen und größen technisch anpassen?
Wie du die einzelnen Elemente anordnen kannst zeige ich im Video ab der Minute 3:00
Bezüglich der Größen dann ab Minute 6:18
Aber du kannst darüber hinaus natürlich die items auch ganz normal via width/height in der Größe exakt definieren etc.
@@ProgrammierenMario sehr gut danke!
Hieß der ne eigentlich Gollum? 😄 Danke.. schöne Zusammenfassung fürs Lehrbuch.
Gern geschehen 😊
Wieder mal ein tolles Video. Danke dir. Aber ich habe da eine Frage. Nehmen wir mal an ich habe ein Container mit fünf Elementen. Vier Elemente sind Links und das letzte ein Button. Schreibe dann das: .... display: flex; justify-content:flex-start;. usw. Nun möchte ich aber nur das letzte Element viel weiter nach rechts verschieben. Mario wie mach ich das unter Flexbox?
Gebe dem letzten Element die Eigenschaft margin-left: auto
und lasse die Magie auf dich wirken. Wenn ich dich richtig verstanden habe sollte das so klappen, falls nicht irgendwas anderes bei dir dazwischen funkt. 🙂
@@ProgrammierenMario Ich habe das vierte Element die Eigenschaft margin-right: 550px; gegeben. Und siehe da das fünfte Element hat sich nach rechts verschoben. Aber dafür ist die Navigation nicht mehr responsive.
King
:)
Hallo Mario, ist es möglich Flexbox mit Grid zu kombinieren oder eher nicht? Wie sieht es grundsätzlich aus, wenn man Flexbox und Grid kombiniert, falls dies möglich ist/wäre bei responsiven Websites? Muss man dann z.B. Grid und Flexbox 'einzeln' mit @media ansprechen, damit die Website passend gemacht werden kann? Danke und Gruss, Peter
Beides zusammen in einem Element lässt sich nicht kombinieren. Aber du könntest z. B. mit Grid den groben Rahmen des Layouts definieren. Einzelne Elemente innerhalb eines Grid-Items dann mit Flexbox ausrichten.
Hallo Mario,
ich benutze mehrere Boxen untereinander. Leider ist der Abstand da zu groß. Wie kann man das einstellen?
Grüße
Jörg
Ok ich hab das nun mit grid gemacht. Gut das es deine Tutorials gibt.
Alles klar ✌️
Hast Du Entwickler studiert oder learning by doing?
Learning bei Doing, schon immer und zu jeder Zeit. Egal was ich nebenher noch so mache um bedrucktes Papier zu erhalten welches Viele für wichtig halten. 😉
@@ProgrammierenMario Wow, hätte ich nicht gedacht. Bildung ist wichtig, aber ich denke Unternehmen wollen wissen was du kannst was ein Diplom nicht machen kann.
@@myytkn8526 Richtig, zumindest in diesem Bereich ist das eigentlich vollkommen egal welches Papier du vorzeigst. Seit ich in diesem Beruf tätig bin herrscht immer und überall ein Mangel an Leuten. Zu anderen Bereichen kann ich nichts sagen.
Halllo Mario. ich hab mir das tutorial jetzt mehrfach angesehen, aber komm damit noch nicht so recht klar. worauf bezieht sich flex genau? nehmen wir an, ich hab nen div, header oder nav beispielsweise. darin hab ich items, die ich individuell gestalten möchte. bezieht sich dann flex auf die erste ebene also auf nav etc oder kann man sich das ganze als ebenen System sehen?
Hi, flex bezieht sich hier auf die direkten auf die Elemente die sich direkt darunter befinden (Kindelemente), und zwar nur die die direkt darunter liegen, nicht auf die die weiter verschachtelt darunter liegen. Wenn du jetzt aber auch hier die Elemente mit flex positionieren möchtest musst du den Kindelementen wiederum die Eigenschaft flex geben, da sich diese Eigenschaft nur auf die items bezieht die direkt darunter liegen. Hoffe das hilft dir erstmal weiter ;)
Sehr ruhige und angenehme Stimme!
Ansonsten gute Erklärung!
Vielen lieben Dank ✌️🙂