Activer le défilement horizontal dans flexbox

je suis nouveau à flexbox, et j'essaie de faire un site de défilement horizontal. L'idée est de montrer le premier élément comme 100% hauteur et largeur, comme couvrir l'écran avec les éléments restants sur le côté droit, qui ne sera affiché que lorsque je fais défiler.

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

j'ai essayé de régler le premier article à 100% de largeur, mais il est toujours adapté comme les autres articles.

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

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>
25
demandé sur Darshan Rivka Whittle 2014-05-16 06:20:34
la source

1 ответов

les articles Flex ont "flex-shrink: 1" par défaut. Si vous voulez que le premier élément remplisse le conteneur et force les autres à déborder (comme il semble que vous faites), alors vous devez mettre "flex-shrink: 0" sur elle.

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

remplacez ça par flex: 10 0 auto -- Le '0' lui donne un flex-shrink de 0, ce qui l'empêche de se rétrécir en dessous du width:100% que vous avez donné il.

peut-être mieux: il suffit de donner flex: none, puisque je ne pense pas que vous bénéficiez vraiment des " 10 "là, puisqu'il n'y a pas d'espace libre à distribuer de toute façon, donc le" 10 " vous donne 10 parts inutiles de rien.

ce qui rend votre règle "splash" en ceci:

.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 truc avec ce changement (mais autrement en utilisant votre CSS/HTML fourni). Cela rend comme votre maquette dans Firefox Nightly et Chrome: http://jsfiddle.net/EVAXW/

45
répondu dholbert 2016-05-23 19:53:56
la source

Autres questions sur