footer>section:last-of-type
{
flex-basis: calc(100% - 4rem);
flex-shrink: 0;
}
Ich schätze ja dieses Vorgehen mit Wrapping und Rechnerei mit calc nicht so sehr.
calc hätte es hier auch nicht benötigt.
Das habe ich nur gemacht, damit die letzte section unten genau so breit ist wie die oberen 3, optisch auch wegen dem border.
Dadurch, dass es Flex gibt, ist das überflüssig. flex: 1; und gut ist, das ist übersichtlich, klar und lesbar.
Dadurch das es Flex gibt??? Das verwende ich doch!
Und mit "flex: 1" wäre es eben nicht getan! Du vergisst wohl, das die letzte section nach unten soll.
Oder du hast vergessen, welche Standard-Werte die Flex-Kinder haben. Nur ein "flex: 1" reicht da nicht!
Und man muss sich nicht mit padding, border etc. befassen.
Was haben die beiden Dinge denn jetzt damit zu tun? Die sind doch für was ganz anderes!
Ich glaube, du bringst da paar Sachen durcheinander.
padding => für Innenabstand (nicht margin! hat also keinen Bezug zur Anordnung / Ausrichtung der section-Parts)
border => für die von ihm gewünschten Linien (Border!) oben und unten der Überschriften.
An den Fragen von Emess erkennt man ja, dass dieses Vorgehen unübersichtlich ist und das Verständnis erschwert.
Absolut nicht.
Dieses Vorgehen ist simpel und übersichtlich, und an seinen Fragen erkenne ich viel eher einfach nur, das es für ihn wohl ein paar neue Stellen gibt.
Hat er einmal das mit "flex-basis / flex-shrink / flex-grow" verstanden, ist mein Vorgehen nahezu selbsterklärend.
Und, Bemerkung am Rande: Auch an dieser Stelle frage ich mich, wo die Mitglieder sind, die sonst das Posten von fertigem Code reflexhaft beanstanden. 
Eigentlich schon. Aber hier habe ich eher sein vorhandenen Code umgeschrieben.
Eine Antwort wie "Ich würde die & die Elemente gegen die & die tauschen und dies und jenes anders machen" würde an dieser Stelle denke
ich nicht so zielführend sein und nur ein paar (durch das Codeposting) vermeidbare (Verständnis-)Fragen hervorrufen...
======================================
Ich bin eigentlich ein Freund von fertigem Code. Ich kann mir dann tagelang ansehen und studieren. Ist ja nicht so, dass ich den direkt reinkopiere und weitervekaufe. Ich wiil was ich gelernt habe bzw fertig bekommen habe mir zu eigen machen. Um das auch mal selbstständig zu können.
Ja, das ist immer so eine Sache.
Auf der einen Seite haben die anderen schon recht, (komplett) fertigen Code zu kritisieren. Das führt bei Leuten, die ne schnelle C&P Lösung anstreben zu einem deutlich schlechteren (bleibenden) Effekt.
Auf der anderen Seite ist so ein Code-Posting bei Leuten wie dir, die "wissbegierig" sind, meiner Meinung nach effektiver, als seine Vorschläge nur "trocken" zu beschreiben.
Auch kann man ja nicht von jedem der im Forum eine Frage stellt erwarten, das er zu einem Entwickler werden und deshalb gefälligst lernen soll.
Manche brauchen wirklich einfach nur kurz Hilfe bei gewissen Aufgabenstellungen, ohne das sie überhaupt in diesem Bereich tätig sein wollen.
Sollen diese Leute dann auch selbst bei den kleinsten Dingen entweder alles benötigte lernen oder es einem Entwickler überlassen, anstatt als "Außenstehender" eine kurze Frage zu stellen und auf die Lösung ihres Problems zu hoffen?
Doch wieso flex-direction: column;
Müsste die 4 section dann nicht untereinander stehen
Sie genauer hin. "flex-direction: column" steht hier nicht "footer", sonder bei "footer>section", ist also auf die section (deren Inhalt) bezogen.
Wieso ordnet sich die letzte section mittig unten an?
...
Aber woher weis die letzte section dass sie unter den 3 vorigen sections anordnen soll?
Die anderen haben alle "flex-basis: 0", sind also gleich. Die letzte hat da aber einen entsprechenden Wert und "flex-shrink: 0" sorgt dafür, das es nicht schrumpft, um noch in die erste Zeile zu passen (falls der Inhalt so klein wäre), sondern immer diese "100% - 4rem" bleibt.
Genau deshalb ist die letzte section auch, wie gewollt unterhalb. Sie hat eine Breite bekommen und die Anweisung, nicht zu schrumpfen (sonst wäre sie geschrumpft in der ersten Zeile neben den anderen). Damit sie auf die nächste Zeile springt, braucht das Elternelement noch "flex-wrap: wrap".
Code sollte so gestaltet sein, dass er klar und selbst erklärend ist und keine Rätsel aufgibt.
Bei Neulingen die die Befehle noch nicht kannten, wird er nicht selbsterklärend sein außer, man versieht ihn mit Kommentaren oder erklärt ihn!
flex-basis: 0;
macht die ersten 3 sectionen gleich breit
und das
flex-basis: calc(100% - 4rem);
flex-shrink: 0;
soll die 4. section nach unten geschoben werde? Wo steht das
Selbst kann ich das nirgends rauslesen
https://wiki.selfhtml.org/wiki/CSS/Tutor…xbox/Flex-Items
Alles anzeigen
Das ergibt sich automatisch sobald du, wie ich weiter oben grad schon angesprochen habe, verstanden hast, was "flex-basis / flex-shrink / flex-grow" machen.
Ich empfehle dir als Nachschlagwerk das MDN.
Und für FlexBox im speziellen auch den Guide.
Das liegt daran, dass dieses Vorgehen mit Flex nichts zu tun hat, sondern veraltet ist.
Was genau ist veraltet und was genau hat nichts mit Flexbox zu tun?
Es bringt dir wenig Nutzen wenn Du dort einsteigst um es zu verstehen.
Im Gegenteil! Flex & Grid und deren Anweisungen richtig zu verstehen bringt ihn auf jeden Fall weiter.
Profitieren würdest Du, wenn Du dich damit vertraut machen würdest, wie man so etwas mit Mitteln umsetzt, die Stand der Technik sind, siehe auch mein Posting #23 in deinem anderen Thread.
Was genau aus deinem Posting #23 im anderen Thread steht in Differrenz zu meinem vorgehen hier?
Was ist hier so veraltetes im Code / Vorgehen? Und was hat nichts mit Flex zu tun?
