L'activation de défilement horizontale dans flexbox
Je suis nouveau sur flexbox, et je suis en train de faire un défilement horizontal site web. L'idée est de montrer le premier élément que 100% de la hauteur et de la largeur, comme recouvrant l'écran avec le reste des éléments de la droite, qui ne seront affichés que lorsque je scroll.
Voici une image de ce que je suis en train de faire:
J'ai essayé le premier élément à 100% de largeur, mais il est encore ajusté, tout comme d'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>
Vous devez vous connecter pour publier un commentaire.
Flex éléments ont "flex-shrink: 1" par défaut. Si vous souhaitez que le premier élément de remplir le récipient et forcer les autres à débordement (car on dirait que vous le faites, alors vous avez besoin de mettre la "flex-shrink: 0" sur elle.
La meilleure façon de le faire est par l'intermédiaire de la "flex" raccourci, que vous utilisez déjà pour lui donner "flex: 10".
Il suffit de remplacer qu'avec
flex: 10 0 auto
-- " 0 " là, il donne un flex réduction de 0, ce qui l'empêche de se réduire au-dessous de lawidth:100%
que vous avez donné.Peut-être mieux: il suffit de lui donner
flex: none
, car je ne pense pas que vous êtes vraiment obtenir quelque avantage de la "10", car il n'y a pas d'espace libre pour distribuer de toute façon, de sorte que le "10" est de vous donner 10 inutile actions de rien.De sorte que rend votre 'splash' la règle suivante:
Ici un violon avec ce changement (mais sinon, à l'aide de votre condition CSS/HTML). Cela rend comme votre maquette dans Firefox Nightly et Chrome:
http://jsfiddle.net/EVAXW/
.flex-container
a une largeur égale à 100% de parent, et non à l'ensemble du contenu de la largeur.