web-dev-qa-db-fra.com

Activation du défilement horizontal dans flexbox

Je suis nouveau sur flexbox et j'essaie de créer un site Web à défilement horizontal. L'idée est de montrer le premier élément à 100% en hauteur et en largeur, comme couvrir l'écran avec les autres éléments sur le côté droit, qui ne seront affichés que lorsque je défilerai.

Voici une image de ce que j'essaie de faire: enter image description here

J'ai essayé de régler le premier élément à 100% de largeur, mais il est toujours ajusté comme les autres éléments.

Voici mon code CSS:

    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; 
    }

Et mon code HTML:

<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>
cssflexbox
28
designerNProgrammer

Les éléments flex ont par défaut "flex-shrink: 1". Si vous voulez que le premier élément remplisse le conteneur et force les autres à déborder (comme cela vous ressemble), vous devez définir "flex-shrink: 0" dessus.

La meilleure façon de le faire est d'utiliser le raccourci "flex", que vous utilisez déjà pour lui donner "flex: 10".

Remplacez simplement cela par flex: 10 0 auto - le '0' lui donne un flex-rétrécissement de 0, ce qui l'empêche de rétrécir en dessous du width:100% que vous l'avez donné.

Peut-être mieux: donnez-lui simplement flex: none, car je ne pense pas que vous tiriez vraiment profit du "10", car il n'y a pas d'espace libre à distribuer de toute façon, donc le "10" vous donne 10 parts inutiles de rien.

Cela fait donc de votre règle "splash":

.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;
}

Voici un violon avec ce changement (mais sinon en utilisant votre CSS/HTML fourni). Cela ressemble à votre maquette dans Firefox Nightly et Chrome: http://jsfiddle.net/EVAXW/

49
dholbert