Aktivieren der horizontalen Bildlauf in Flexbox

Question

Ich bin neu in Flexbox, und ich versuche, eine horizontale Scrollen Website zu machen. Die Idee ist, den ersten Punkt, als 100% der Höhe und Breite zu zeigen, wie für den Bildschirm mit den übrigen Elementen auf die rechte Seite, die nur dann angezeigt wird, wenn I scrollen. Hier

ist ein Bild von dem, was ich zu tun versucht:

Ich habe versucht, das erste Element auf 100% Breite einstellen, aber es ist immer noch genauso wie andere Gegenstände ausgestattet.

Hier ist mein CSS-Code:

body 
    { 
     margin: 0; 
     padding: 0; 
     background-color: rgb(242, 242, 242); 

    } 
    .flex-container 
    { 
     display: -webkit-box;  
     display: -moz-box;   
     display: -ms-flexbox;  
     display: -webkit-flex;  
     display: flex;  

     flex-flow:row; 
     height:100%; 
     position:absolute; 
     width:100%; 


     /*flex-wrap:wrap;*/ 
    } 
    .box 
    { 
     padding: 20px; 
     color:white; 
     font-size:22px; 
     background-color: crimson; 
     border:1px solid white; 
     flex:1; 
     -webkit-flex:1; 
     text-align:center; 
    min-width:200px; 



    } 
    .splash 

    { 
     background-image: url(1.jpg); 
     width:100%; 
      background-size:cover; 
     background-position:50% 50%; 
     background-repeat: no-repeat; 
      transition: all 0.6s ease; 
      flex:10; 
     -webkit-flex:10; 

    } 

    .flex1:hover 
    { 
      flex:4; 
     -webkit-flex:4; 
    } 

Und mein HTML-Code:

<div class="flex-container">   
    <div class="box splash">1</div> 
    <div class="box">2</div> 
    <div class="box">3</div> 
    <div class="box">4</div> 
</div> 

Answer 1

Flex Produkte haben "Flex-schrumpfen: 1" eingestellt. Wenn Sie das erste Element wollen die Behälter füllen und die andere zwingen zum Überlauf (wie es klingt wie Sie tun), dann müssen Sie „Flex-Schrumpf: 0“ setzen darauf.

Der beste Weg, dies zu tun ist über die „flex“ eine Abkürzung, die Sie bereits es „Flex: 10“ zu geben, verwenden.

Ersetzen Sie einfach, dass mit flex: 10 0 auto - die ‚0‘ gibt es eine Flex-Schrumpfung von 0 gibt, die es schrumpft unter dem width:100% verhindert, dass Sie es gegeben haben.

Vielleicht besser: geben Sie einfach flex: none, da ich glaube nicht, dass Sie wirklich einen Vorteil von den "10" dort bekommen, da es keinen freien Platz zum verteilen gibt, also die "10" gibt Ihnen 10 nutzlose Anteile von nichts.

Damit macht Ihr ‚splash‘ -Regel in diese:

.splash { 
    background-image: url(1.jpg); 
    width:100%; 
    background-size:cover; 
    background-position:50% 50%; 
    background-repeat: no-repeat; 
    transition: all 0.6s ease; 
    flex:none; 
} 

Hier ist eine Geige mit dieser Änderung ist (aber ansonsten Ihre bereitgestellt CSS/HTML verwenden). Dies macht wie Ihr Mock-up in Firefox Nightly und Chrome: http://jsfiddle.net/EVAXW/