Hallo
flexbox und display:table waren ja alles falsche ansätze.
Flexbox war schon der richtige Ansatz, die konntest es nur noch nicht richtig verwenden.
gibt es zu dem thema ein tutorial, dass ich dass besser verstehe und später dann auch selbst bauen kann?
Ich kenne leider kein gutes. In den meisten werden nur die Grundeigenschaften von Flexbox erklärt. Da werden dann mehrere gleichgroße flex-items oder flex-items mit genau dem selben Inhalt / Text angeordnet. Also viel Theorie, wenig Praxis.
p.s. kann ich eigentlich sagen: z. b. "div 1" ist ein parent und "div 2" (kind) soll die gleiche höhe haben wie "div 1"? geht sowas auch?
So wie ich deine Frage grade verstehe - nein. div 2 kann div 1 natürlich voll ausfüllen, aber das wirst du nicht meinen.
Ich habe mal eine Seite mit meiner Flexbox-Linksammlung erstellt. Das ist für mich einfacher als alle Links einzeln hier ins Forum zu klatschen. Wenn du dich etwas in Flexbox reingearbeitet hast und des englischen nicht so mächtig bist, sind trotzdem viele der englischsprachigen Videos interessant, da meist der Quelltext und das Ergebnis gezeigt werden:
HTML
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Flexbox Links 01</title>
<meta name="description" content="HTML5, CSS3">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
<![endif]-->
<style>
/*Icon-Font - font-family: 'FontAwesome';*/
@import url(http://fontawesome.io/assets/font-awesome/css/font-awesome.css);
@media all {
header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
display: block;
}
* {
box-sizing: border-box;
}
html {
font-family: sans-serif;
font-size: 120%;
line-height: 1.3;
}
body {
width: 94%;
margin: 1rem 0;
}
}
/*Navigation Grundeinstellungen*/
/*visited ist aus Sicherheitsgründen nur mit Einschränkungen möglich*/
@media all {
a,
a:link,
a:visited,
a:hover,
a:focus,
a:active {
color: black;
text-decoration: none;
line-height: 2;
outline: none;
display: block;
margin-left: 1rem;
}
}
/*Spezielle Einstellungen*/
@media all {
}
/*Vorlage für das gesamte CSS*/
@media all {
}
/*Vorlage zum Kopieren für Media Queries - Mobile first*/
@media only screen and (min-width: 0px) {
}
/*Vorlage zum Kopieren für Media Queries - Desktop first*/
@media only screen and (max-width: 0px) {
}
</style>
</head>
<body>
<header>
</header>
<nav>
</nav>
<main>
<section>
<h2>CSS Browserunterstützung</h2>
<a href="http://caniuse.com/#search=flexbox">Can I use - Flexbox</a>
<a href="http://css3clickchart.com/">CSS3 Click Chart</a>
<h2>Flexbox deutsche Infos</h2>
<a href="https://developer.mozilla.org/de/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">Mozilla (dt.)</a>
<a href="http://on-design.de/tutor/">On-Design (Startseite, dt.)</a>
<a href="http://on-design.de/tutor/html5_css3/css3/flexbox.html">On-Design Flexbox direkt (dt.)</a>
<a href="http://joerghuelsermann.de/artikel/css/flex/">Jörg Hülsermann (dt.)</a>
<a href="http://blog.kulturbanause.de/2013/07/einfuhrung-in-das-flexbox-modell-von-css/">Kulturbanause (dt.)</a>
<a href="http://bemeo.de/css-das-flexbox-modul/">bemeo (dt.)</a>
<a href="http://webkrauts.de/artikel/2012/css3-flexbox-abloesung-fuer-float-layouts">Flexbox Webkrauts (dt.)</a>
<a href="http://www.css-wiki.com/listings/flexbox.html">CSS-Wiki (dt.)</a>
<a href="http://de.learnlayout.com/flexbox.html">Learnlayout - Flexbox (dt.)</a>
<a href="http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Gr%C3%B6%C3%9Fenangaben/Flexbox">SelfHTML Flexbox (dt.)</a>
<a href="http://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/flexibles_Layout">SelfHTML - Anleitung Flexbox-Layout (dt.)</a>
<a href="https://msdn.microsoft.com/library/bg124109%28v=vs.85%29.aspx">Flexbox Microsoft (dt.)</a>
<a href="http://msdn.microsoft.com/de-de/library/ie/hh673531%28v=vs.85%29.aspx">Microsoft IE 10 (dt.)</a>
<a href="http://maddesigns.de/flexbox-fallbacks-2670.html">Maddesigns: Flexbox Fallbacks (dt.)</a>
</section>
<section>
<h2>Flexbox englische Infos</h2>
<a href="https://www.w3.org/TR/css-flexbox/">W3C - Flexbox (engl.)</a>
<a href="https://drafts.csswg.org/css-flexbox/">W3C - Flexbox drafts (engl.)</a>
<a href="http://tympanus.net/codrops/css_reference/flexbox/">Codrops (Sara Soueidan, engl.)</a>
<a href="https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties">scotch.io (Dimitar Stojanov, engl.)</a>
<a href="http://www.sketchingwithcss.com/samplechapter/cheatsheet.html">Ultimate Flexbox Sheet (engl.)</a>
<a href="http://zomigi.com/blog/leveling-up-with-flexbox/">Zoe Gillenwater Blog (engl.)</a>
<a href="http://smoresday.us/">Zoe Gillenwater - Smoresday (engl.)</a>
<a href="http://www.w3.org/TR/css-flexbox-1/">W3C (engl.)</a>
<a href="https://github.com/philipwalton/flexbugs">Philip Walton - Flexbugs (engl.)</a>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">Mozilla (engl.)</a>
<a href="http://dev.opera.com/articles/advanced-cross-browser-flexbox/#fallbacks">Cross-Browser Flexbox (engl.)</a>
<a href="http://css-tricks.com/snippets/css/a-guide-to-flexbox/">CSS-Tricks - Complete Guide (engl.)</a>
<a href="https://css-tricks.com/flexbox-bar-navigation/">CSS-Tricks - Navigation (engl.)</a>
<a href="http://philipwalton.github.io/solved-by-flexbox/">Philip Walton - Flexbox Showcase (engl.)</a>
<a href="https://css-tricks.com/flexbox-bar-navigation/">Philip Walton - 6 Layoutbeispiele Navigation (engl.)</a>
<a href="http://www.planningforaliens.com/blog/2014/03/11/real-world-flexbox/">Flexbox in the real World (engl.)</a>
<a href="http://www.sitepoint.com/flexbox-css-flexible-box-layout/">Sitepoint (engl.)</a>
<a href="http://kyusuf.com/post/almost-complete-guide-to-flexbox-without-flexbox">Kenan Yusuf: Flexbox without Flexbox (Flexbox Fallbacks, engl.)</a>
<a href="http://labs.jensimmons.com">Labs Jen Simmons (Beispiele, auch Flexbox, engl.)</a>
<a href="http://bitsofco.de/6-reasons-to-start-using-flexbox/">Ire Aderinokun: 6 Reasons to Start Using Flexbox (engl.)</a>
</section>
<section>
<h2>Flexbox (Prefix- und Code-Generatoren)</h2>
<a href="http://jsbin.com/gufoko/quiet">Auto-Prefixer (engl., Prefixe automatisch)</a>
<a href="http://pleeease.io/play/">Pleeease</a>
<a href="https://autoprefixer.github.io/">ymatuhin Autoprefixer (engl., kann auch auf eigenem Rechner installiert werden)</a>
<a href="http://the-echoplex.net/flexyboxes/">Flexy Boxes (engl., Code-Generator)</a>
<a href="https://scotch.io/demos/visual-guide-to-css3-flexbox-flexbox-playground">Flexbox Playground (engl., Codegenerator)</a>
<a href="http://bennettfeely.com/flexplorer/">Flexplorer (engl., Code-Generator)</a>
<a href="http://demo.agektmr.com/flexbox/">Flexbox please (engl., Code-Generator)</a>
<h2>Flexbox Polyfill</h2>
<a href="https://github.com/10up/flexibility">flexibility Polyfill (engl.)</a>
<h2>Flexbox spielerisch</h2>
<a href="https://preview.webflow.com/preview/flexbox-game?preview=d1a26b027c4803817087a91c651e321f&m=1">Learn Flexbox with Webflow (engl.)</a>
<a href="http://flexboxfroggy.com/">Flexbox Froggy - Lernspiel (engl.)</a>
<a href="http://www.flexboxdefense.com/">FlexboxDefense (engl.)</a>
</section>
<section>
<h2>Flexbox Videos</h2>
<a href="https://www.youtube.com/watch?v=xyLa8LNIKjg&index=4&list=PLvn2GNuvFTjTD5J2I42HVxe11s8ScbpeX">Michael Albers (dt.)</a>
<a href="https://www.youtube.com/watch?v=yTkV2_eJox0">t3n - Flexbox im Praxiseinsatz (dt.)</a>
<a href="https://www.youtube.com/watch?v=hlgsOIPvfdM">Peter Rozek - Webinale 2014 - Flexbox-Modell (mir viel zu theoretisch, dt.)</a>
<a href="https://www.youtube.com/watch?v=QW4rsnA8k_0">Vortrag Haris Mahmood - Swaggy Layouts with Flexbox (engl., rasant)</a>
<a href="https://www.youtube.com/watch?v=FKfNbqqeGi4">Vortrag Tab Atkins (engl.)</a>
<a href="https://www.youtube.com/watch?v=NEnaKAoKSp0">Vortrag Zoe Gillenwater - Leveling Up With Flexbox (engl., 2014)</a>
<a href="https://www.youtube.com/watch?v=_98SE8WUvLk">Vortrag Zoe Gillenwater - Enhancing Responsiveness With Flexbox (engl., 2015)</a>
<a href="https://www.youtube.com/watch?v=kTEGsFJDnC8">Vortrag Zoe Gillenwater - CSS lessons learned the hard way (engl., 2015)</a>
<a href="https://www.youtube.com/watch?v=rRcYw7yIFWY">Vortrag Zoe Gillenwater - CSS lessons learned the hard way btconfBER2014 (engl.)</a>
<a href="https://www.youtube.com/watch?v=3ikye7Qc7Ak">Vortrag Lea Verou - More CSS Secrets (engl., 2013, kein Flexbox)</a>
<a href="https://www.youtube.com/watch?v=2hak2xElAKI">Vortrag Eric Carlisle - Ridiculously Easy Layouts with Flexbox (engl.)</a>
<a href="https://www.youtube.com/watch?v=055T0xZpfRk">Vortrag Guillaume Hammadi (engl.)</a>
<a href="https://www.youtube.com/watch?v=JugXlCoSFPc">The Future ins hear - Intro to Flexbox (engl.)</a>
<a href="https://www.youtube.com/watch?v=RSriXZSt0-c">Webdesigner Depot 01 (engl.)</a>
<a href="https://www.youtube.com/watch?v=D-cWTumhSEU">Webdesigner Depot 02 (engl.)</a>
<a href="https://www.youtube.com/watch?v=nB-Ygtk3AO0">Curtis Stage (engl.)</a>
<a href="https://www.youtube.com/watch?v=G7EIAgfkhmg">devtips - Flexbox (engl.)</a>
<a href="https://www.youtube.com/watch?v=H1lREysgdgc">devtips - Flexbox Examples (engl.)</a>
<a href="https://www.youtube.com/watch?v=sewV3LsmoXI">Wes Box - Learn CSS3 Flexbox</a>
<a href="http://flexbox.io/">Wes Bos - What a Flexbox (engl.)</a>
<a href="https://www.youtube.com/results?search_query=lynda.com+flexbox">lynda.com (engl.)</a>
<a href="https://www.youtube.com/watch?v=ZPrUPhaSMRI">Treehouse (engl., ab Min. 9)</a>
<a href="https://www.youtube.com/watch?v=Vj7NZ6FiQvo&list=PLu8EoSxDXHP7xj_y6NIAhy0wuCd4uVdid">What the Flexbox (engl., 20 Videos)</a>
<a href="https://www.youtube.com/watch?v=PZPPwxumEzs">Jen Simmons - Progressing our layouts (engl.)</a>
<a href="https://www.youtube.com/watch?v=ZNpn7FBp_9U">Jen Simmons - Getting out of our Ruts (engl.)</a>
<a href="https://www.youtube.com/watch?v=FoEl6N5MW2U">Techniques to flexible responsive web design systems with CSS flexbox and viewport relative units (engl.)</a>
</section>
</main>
<footer>
</footer>
</body>
</html>Gruss
MrMurphy