CSS Flexbox in 5 Minuten erklärt | CSS Tutorial Deutsch
Вставка
- Опубліковано 16 чер 2024
- Hol dir bei Hostinger das beste Webhosting, um deine Webseite online zu stellen: www.hostinger.de/kurzundknapp
Mit dem Coupon-Code: KURZUNDKNAPP
sparst du 10% Rabatt auf alle Webhosting-Pakete mit einer Laufzeit von 12 Monaten und mehr.
Das Flexible Box Layout, auch Flexbox genannt ist ein Layoutmodell, das die Platzverteilung zwischen Elementen regelt. Es ist eine Methode verschiedene Webseitenelemente in Abhängigkeit vom Anzeigebereich anzuordnen. Auf die Art und Weise kann man Sicherstellen, dass die Webseite ordentlich auf den verschiedenen Geräten angezeigt werden kann.
HTML5 Udemy Kurs: www.udemy.com/course/coding2g...
00:00 Grundlagen
00:27 flex-direction
01:15 justify-content
02:35 align-items
02:54 flex-wrap
03:19 grow & shrink
05:03 align-self
Folgendes wurde im Video erklärt:
flex-direction: row; column; row-reverse; column-reverse
justify-content: flex-start; flex-end; center; space-between; space-around; space-evenly;
align-items: flex-start; flex-end; center
flex-wrap: wrap; nowrap;
flex-grow
flex-shrink
flex-basis
= flex
align-self: flex-start; flex-end; center
![CSS Flexbox Tutorial Deutsch für Anfänger [20 Minuten]](http://i.ytimg.com/vi/TX0g5NmsKig/mqdefault.jpg)
Super erklärt....bisher das beste Video zur Flexbox das ich gefunden habe....
Da kann ich nur zustimmen. So erklärt das es einfach zu verstehen ist. Gerne mehr davon!
Klasse !!! Knackig und (für mich) sehr verständlich auf den Punkt gebracht. So liebe ich das. Vielen Dank dafür.
Das ist das beste Video auf ganz UA-cam man, einfach seid einem halb Jahr programmierer, und nix von der geilsten Funktion gewusst.
Danke man!!!!!!!!!!!!!!
cool, space-evenly kannte ich noch nicht, wird sofort eingebaut... super erklärt, dankeschön 🙂
Noch nie so simpel erklärt bekommen. Vielen Dank! Hast dir mein Abo in wenigen Sekunden verdient 🙂👍
Wow, Flexbox super auf den Punkt gebracht! Für mich ist CSS einfach ein lästiger Part mit dem ich mich notgedrungen herumschlagen muss. Daher freut es mich sehr in so kurzer Zeit die Basics erklärt zu bekommen.
CSS ist doch eh cool
Alles sehr komprimiert und gut nachzuvollziehen. Schade, dass es nur relativ wenige Klicks hat. Dein Kanal gehört zu den besten in diesem Thema und alle Videos sind leider zu wenig beachtet (hätten wesentlich Besucher mehr verdient!).
Vielen lieben Dank. Sie haben mir extrem geholfen. Extrem gutes Video.
❤️ Dank!
👍 + Abo + 1. Kommentar
Ich habe bis jetzt nur dieses Video von Deinem YT-Kanal gesehen. Wenn all Deine Video von dieser Qualität sind dann hau bitte regelmäßig Video raus, damit YT vielen Leuten Deinen Mehrwert zeigt.
Vielen Dank 😊, werde ich machen
Wirklich top erklärt, aber am besten mehrmals schauen und direkt anwenden👌
Megagut erklärt! Danke.
super gutes Video! Kurz und anschaulich
Danke für das Lob!
Genau das habe ich gesucht. Danke!
Mega! Vielen Dank!
Druckbetankung :-) Sehr gut erklärt und dargestellt!
Vielen Dank!
Wow! Richtig gutes Video! Danke vielmals ;)
Vielen Dank!
Top! Danke 🙌
sehr hilfreich
Muss man die Flexbox-Klasse im -Bereich des HTML-Dokuments einfügen oder kann man es auch in die style.css-Datei einfügen und dann vom HTML-Dokument aus abrufen.
Hast du die CSS datei noch und evtl die Html Datei?
Super Video! Ich finde das neben dem Thema aber auch so cool das sich der Browser automatisch aktualisiert. Gibt es auch ein Video wie man das einrichten kann (virutelle Serverumgebung?). Auch das wenn man die Fenster (VS + Browser) hin und her zieht das sich die Fenster beide automatisch anpassen. Gibt es hier auch ein Tutorial? Ich würde diesen Workflow super gerne übernehmen wollen, but don`t know how it works.
Also falls du noch Interesse hast: Die Echtzeitaktualisierung kommt von einer Erweiterung (=Extension) in VSC (=Visual Studio Code) names LiveServer (oder so ähnlich) und das mit dem Fenster hin- und herziehen sollte standardmäßig in Windows (vllt erst ab Windows 11?) vorhanden sein
Ich hab eine main div und darunter 2 bilder in seperaten Divs.
Die Main Div hat ein display flex und eine width von 100%
Wenn ich jetzt der darunter liegenden child ein Flex-shrink von 1 gebe, weil es über die Div hinaus geht passiert genau 0
Wie macht man das die Zahl auch vertikal in der Mitte sich befindet?
In diesem Tutorial ist das einfach über ein padding-top und padding-bottom geregelt. Du könntest aber auch bei den Boxen ein display flex festlegen und dort den Inhalt mit justify-content: center; und align-items: center; zentrieren.
Also einfach
.child{
display: flex;
justify-content: center;
align-items: center;
}
In diesem Video wurde Flexbox ja nur benutzt, um alle Elemente innerhalb des Elternelements zu positionieren. Du kannst aber genauso auch den Inhalt der Kindelemente mit Flexbox positionieren.
Im Video wird das vertikale Zentrieren bei 2:35 erklärt.
Mache gerade eine Schulung und mein Lehrer kann mir einfach nicht die Definition erklären von Flexbox. Ich musste es mir selbst erklären… echt traurig.
Ist dies normal, wenn man etwas älter ist und Jahre lange Erfahrung hat im Bereich IT?!
Danke für das Video 😊 echt gut erklärt.
Ahja Abo und Like ist da 👍🏼😊
Hi, wahrscheinlich echt ne dumme Frage, aber wie kann man ein Rechteck erstllen und in diesem zum Beispiel ein Bild anordnen?
Hi, dafür benötigst du in HTML ein (das ist dein Rechteck) und in dem div ein , dass mit dem src-Attribut auf den Bildpfad verweist. Das könnte zum Beispiel so aussehen:
In CSS kannst du die Seitenverhältnisse des Rechtsecks mit den Eigenschaften width und height bestimmen. Nun kannst du mit Flexbox-Eigenschaften (wie im Video erklärt) das Bild in dem Rechteck positionieren. Zum Beispiel justify-content: center; und align-items: center; Außerdem kannst du mit der overflow Eigenschaft bestimmen, was geschehen soll, wenn das Bild größer ist als das Rechteck. (overflow: hidden; schneidet alles Überstehende ab. overflow: scroll; fügt ein Scrollbar hinzu). Zu dem solltest du auch bei dem Bild eine height und width bestimmen. Zum Beispiel könntest du eine der beiden Eigenschaften auf 100% setzen. Das ist dir dann aber selbst überlassen, wie du das haben möchtest.
@@coding-kurzundknapp Hut ab und Danke für deine Mühe, jetzt hab ich es verstanden. Vielen Dank
@@coding-kurzundknapp und es hat geklappt, Danke
Warum sind die Videos so kurz? Ihr hättet noch mehr Bespiele gegeben.