nicht angemeldet
Hallo,
hier meine Linksammlung zu Flexbox als Quelltext für eine HTML-Seite:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Flexbox Links 01</title>
<meta name="description" content="HTML5, CSS3, Flexbox">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Um alte IE HTML5-tauglich zu machen -->
<!--[if lt IE 9]>
<script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
<![endif]-->
<style>
/*Grundeinstellungen*/
@import url(http://fortawesome.github.io/Font-Awesome/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-size: 120%;
}
body {
margin: 0;
}
}
/*Grundeinstellungen für diese Seite*/
@media all {
body {
line-height: 1.5;
padding: 1rem;
}
body > * {
padding: 1rem;
border: 1px solid silver;
border-radius: 0.3rem;
margin: 1rem;
}
a {
color: blue;
background-color: white;
display: block;
text-decoration: none;
outline: none;
margin-bottom: 0.5rem;
}
a:hover {
color: blue;
background-color: papayawhip;
}
}
/*Spezielle Einstellungen*/
@media all {
}
/*Flexbox Grundlayout*/
@media all {
body {
display: flex;
flex-wrap: wrap;
}
body > * {
flex: 1 1 40%;
}
}
@media only screen and (max-width: 900px) {
body > * {
flex: 1 1 100%;
}
}
/* Vorlage zum Kopieren für Media Queries */
@media only screen and (max-width: 0px) {
}
</style>
</head>
<body>
<section>
<h2>Flexbox</h2>
<a href="http://on-design.de/tutor/html5_css3/css3/flexbox.html">On-Design Flexbox direkt</a>
<a href="http://joerghuelsermann.de/artikel/css/flex/">Jörg Hülsermann</a>
<a href="http://blog.kulturbanause.de/2013/07/einfuhrung-in-das-flexbox-modell-von-css/">Kulturbanause</a>
<a href="http://bemeo.de/css-das-flexbox-modul/">bemeo</a>
<a href="http://webkrauts.de/artikel/2012/css3-flexbox-abloesung-fuer-float-layouts">Flexbox Webkrauts</a>
<a href="http://www.css-wiki.com/listings/flexbox.html">CSS-Wiki</a>
<a href="http://de.learnlayout.com/flexbox.html">Lernlayout - Flexbox</a>
<a href="http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Gr%C3%B6%C3%9Fenangaben/Flexbox">SelfHTML Flexbox</a>
<a href="http://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/flexibles_Layout">SelfHTML - Anleitung Flexbox-Layout</a>
<a href="https://msdn.microsoft.com/library/bg124109%28v=vs.85%29.aspx">Flexbox Microsoft</a>
<a href="http://msdn.microsoft.com/de-de/library/ie/hh673531%28v=vs.85%29.aspx">Microsoft IE 10</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://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>
</section>
<section>
<h2>Flexbox englische Infos</h2>
<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>
</section>
<section>
<h2>Flexbox Videos</h2>
<a href="https://www.youtube.com/watch?v=mU0UBRq-IJc&index=3&list=PLa9XvrFEe8CmvU5Ant9fTx2lZudktAyhH">Florence Maurice - Flexbox Formular-Layout</a>
<a href="https://www.video2brain.com/de/tutorial/leerraumverteilung">Florence Maurice - Flexbox Leerraumverteilung (Gratisvideo)</a>
<a href="https://www.youtube.com/watch?v=xyLa8LNIKjg">Michael Albers</a>
<a href="https://www.youtube.com/watch?v=yTkV2_eJox0">t3n - Flexbox im Praxiseinsatz</a>
<a href="https://www.youtube.com/watch?v=hlgsOIPvfdM">Webinale 2014 - Flexbox-Modell</a>
<a href="https://www.youtube.com/watch?v=FKfNbqqeGi4">Vortrag Tab Atkins (engl.)</a>
<a href="https://www.youtube.com/watch?v=055T0xZpfRk">Vortrag Guillaume Hammadi (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="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>
</section>
</body>
</html>
Gruss
MrMurphy
Auge
Gunnar Bittersmann
Der Martin
Camping_RIDER