MrMurphy1: Flex-Box

Beitrag lesen

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

0 57

Flex-Box

franzsen
  • css
  1. 0
    Auge
    1. 0
      franzsen
      1. 0
        Auge
  2. 0
    Gunnar Bittersmann
  3. 0
    Gunnar Bittersmann
    • css
    • html
    1. 0
      franzsen
      1. 0
        Gunnar Bittersmann
  4. 0
    franzsen
    1. 0
      MrMurphy1
      1. 0
        franzsen
        1. 0
          Gunnar Bittersmann
          1. 0
            franzsen
            1. 0
              MrMurphy1
              1. 0
                franzsen
                1. 0
                  Der Martin
              2. 0
                Gunnar Bittersmann
                1. 0
                  franzsen
                  1. 0
                    MrMurphy1
                    1. 0
                      franzsen
                      1. 0
                        MrMurphy1
                        1. 0
                          franzsen
                          1. 0
                            MrMurphy1
                            1. 0
                              MrMurphy1
                              1. 0
                                Gunnar Bittersmann
                                1. 0
                                  Gunnar Bittersmann
                                  1. 0
                                    Gunnar Bittersmann
                            2. 0
                              MrMurphy1
                              1. 0
                                Gunnar Bittersmann
                            3. 0
                              MrMurphy1
                              1. 0
                                Franz
                                1. 0
                                  MrMurphy1
                                  1. 0
                                    Franz
                            4. 1
                              Gunnar Bittersmann
        2. 0
          MrMurphy1
          1. 0
            franzsen
    2. 0
      Gunnar Bittersmann
      1. 0
        franzsen
        1. 0
          MrMurphy1
          1. 0
            franzsen
            1. 0
              MrMurphy1
              1. 0
                franzsen
        2. 0
          Gunnar Bittersmann
          1. 0
            franzsen
            1. 0
              Gunnar Bittersmann
            2. 0
              Gunnar Bittersmann
              1. 0
                franzsen
                1. 0
                  MrMurphy1
                  1. 0
                    franzsen
                    1. 1

                      franzsen = Franz = Taco HTML Editor?

                      Camping_RIDER
                      • editor
                      • html
                      • meinung
                      1. 0
                        franzsen
                        1. 0
                          Gunnar Bittersmann
                          • editor
                          1. 0
                            jeena
                            1. 0
                              Camping_RIDER
                            2. 0
                              Gunnar Bittersmann
                              1. 0
                                Christian Kruse
                        2. 0
                          Camping_RIDER