`flex-direction: row-reverse;` et scroll bar

Comment allier les deux ?

L’auteur de ce sujet a trouvé une solution à son problème.
Auteur du sujet

Bonjour,

Je souhaite inverser l’ordre des colonnes (que les premières se retrouvent dernières et les dernières se retrouvent premières).

J’utilise donc flex-direction: row-reverse; mais je perd la scroll bar. :( Comment dois-je m’y prendre ? Ai-je oublier de définir une propriété flex à ma règle CSS?

Bon vol,

A.

Situation de départ :

J’ai cette situation de départ : https://jsfiddle.net/bjf61L2o/

<div class="box">
  <div class="flex-content">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>
.flex-content > div {
  background: red;
  width:25px;
  min-width:25px;
  height:100px;
  margin:5px;
}

.flex-content {
  display: flex;
  height: 100%;
}

.box {
  padding:5px;
  border:3px solid black;
  width: 75px;
  height:125px;
  overflow-x: scroll;
}

Inversion des X :

.flex-content {
  flex-direction: row-reverse;
}

+0 -0

Hello,

Si je comprends bien le principe du flexbox layout, je pense que ce n’est pas possible d’avoir une scrollbar dans ce cas.

Si on numérote des div dans l’ordre du code et si je comprends bien, tu veux afficher:
10 9 8 7 6 5 4 3 2 1
à la place de:
1 2 3 4 5 6 7 8 9 10

sur plusieurs colonnes ou lignes ou pas, on s’en fout ici. Ce qui importe est que tu veux les avoir dans l’ordre inverse.

Maintenant supposons que sur ces 10 il n’y a la place que pour 5. Qu’est-ce que je dois afficher ?

   5 4 3 2 1  
<|-----------#|>

Ou bien:

   10 9 8 7 6
<|#-------------|>

Commencer avec une scrollbar à droite, c’est bizarre. Commencer avec les 5 derniers, c’est tout aussi bizarre. Si ça se trouve, ce petit dilemme n’est pas abordé dans la spécification….

Voilà, c’était mes 2$. Mais si ça se trouve je me trompe complètement.

Ma plateforme avec 23 jeux de société classiques en 6 langues et 13000 joueurs: http://qcsalon.net/ | Apprenez à faire des sites web accessibles http://www.openweb.eu.org/

+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte