Derniers messages sur Zeste de Savoirhttps://zestedesavoir.com/forums/2020-03-12T18:42:24+01:00Les derniers messages parus sur le forum de Zeste de Savoir.`flex-direction: row-reverse;` et scroll bar, message #2170112020-03-12T18:42:24+01:00anonyme/@anonymehttps://zestedesavoir.com/forums/sujet/13628/flex-direction-row-reverse-et-scroll-bar/?page=1#p217011<p>La solution était de rajouter <code>min-width</code> en <code>max-content</code> :</p>
<div class="hljs-code-div"><div class="hljs-line-numbers"><span></span><span></span><span></span><span></span></div><pre><code class="hljs language-css"><span class="hljs-selector-class">.flex-content</span> {
<span class="hljs-attribute">min-width</span>: max-content;
<span class="hljs-attribute">flex-direction</span>: row-reverse;
}
</code></pre></div>`flex-direction: row-reverse;` et scroll bar, message #2157072020-02-15T17:29:33+01:00anonyme/@anonymehttps://zestedesavoir.com/forums/sujet/13628/flex-direction-row-reverse-et-scroll-bar/?page=1#p215707<p>Je voulais dire que la scrollbar sur mon deuxième rendu/résultat ne s’affiche plus.</p>`flex-direction: row-reverse;` et scroll bar, message #2157042020-02-15T15:16:47+01:00QuentinC/@QuentinChttps://zestedesavoir.com/forums/sujet/13628/flex-direction-row-reverse-et-scroll-bar/?page=1#p215704<p>Hello,</p>
<p>Si je comprends bien le principe du flexbox layout, je pense que ce n’est pas possible d’avoir une scrollbar dans ce cas.</p>
<p>Si on numérote des div dans l’ordre du code et si je comprends bien, tu veux afficher:<br>
10 9 8 7 6 5 4 3 2 1<br>
à la place de:<br>
1 2 3 4 5 6 7 8 9 10</p>
<p>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.</p>
<p>Maintenant supposons que sur ces 10 il n’y a la place que pour 5.
Qu’est-ce que je dois afficher ?</p>
<div class="hljs-code-div"><div class="hljs-line-numbers"><span></span><span></span></div><pre><code class="hljs language-angelscript"> <span class="hljs-number">5</span> <span class="hljs-number">4</span> <span class="hljs-number">3</span> <span class="hljs-number">2</span> <span class="hljs-number">1</span>
<|-----------#|>
</code></pre></div>
<p>Ou bien:</p>
<div class="hljs-code-div"><div class="hljs-line-numbers"><span></span><span></span></div><pre><code class="hljs language-angelscript"> <span class="hljs-number">10</span> <span class="hljs-number">9</span> <span class="hljs-number">8</span> <span class="hljs-number">7</span> <span class="hljs-number">6</span>
<|#-------------|>
</code></pre></div>
<p>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….</p>
<p>Voilà, c’était mes 2$. Mais si ça se trouve je me trompe complètement.</p>`flex-direction: row-reverse;` et scroll bar, message #2157012020-02-15T12:11:37+01:00anonyme/@anonymehttps://zestedesavoir.com/forums/sujet/13628/flex-direction-row-reverse-et-scroll-bar/?page=1#p215701<p>Bonjour,</p>
<p>Je souhaite inverser l’ordre des colonnes (que les premières se retrouvent dernières et les dernières se retrouvent premières).</p>
<p>J’utilise donc <code>flex-direction: row-reverse;</code> mais je perd la scroll bar. <img src="/static/smileys/triste.png" alt=":(" class="smiley"> Comment dois-je m’y prendre ? Ai-je oublier de définir une propriété flex à ma règle CSS? </p>
<p>Bon vol,</p>
<p>A.</p>
<h4 id="situation-de-départ">Situation de départ :<a aria-hidden="true" href="#situation-de-départ"><span class="icon icon-link"></span></a></h4>
<p>J’ai cette situation de départ : <a href="https://jsfiddle.net/bjf61L2o/">https://jsfiddle.net/bjf61L2o/</a> </p>
<p><img src="/media/galleries/6585/7007cfb8-63f7-42d2-b48d-ea9a8786de95.png"></p>
<div class="hljs-code-div"><div class="hljs-line-numbers"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div><pre><code class="hljs language-html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"box"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex-content"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
</code></pre></div>
<div class="hljs-code-div"><div class="hljs-line-numbers"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div><pre><code class="hljs language-css"><span class="hljs-selector-class">.flex-content</span> > <span class="hljs-selector-tag">div</span> {
<span class="hljs-attribute">background</span>: red;
<span class="hljs-attribute">width</span>:<span class="hljs-number">25px</span>;
<span class="hljs-attribute">min-width</span>:<span class="hljs-number">25px</span>;
<span class="hljs-attribute">height</span>:<span class="hljs-number">100px</span>;
<span class="hljs-attribute">margin</span>:<span class="hljs-number">5px</span>;
}
<span class="hljs-selector-class">.flex-content</span> {
<span class="hljs-attribute">display</span>: flex;
<span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>;
}
<span class="hljs-selector-class">.box</span> {
<span class="hljs-attribute">padding</span>:<span class="hljs-number">5px</span>;
<span class="hljs-attribute">border</span>:<span class="hljs-number">3px</span> solid black;
<span class="hljs-attribute">width</span>: <span class="hljs-number">75px</span>;
<span class="hljs-attribute">height</span>:<span class="hljs-number">125px</span>;
<span class="hljs-attribute">overflow-x</span>: scroll;
}
</code></pre></div>
<h4 id="inversion-des-x">Inversion des X :<a aria-hidden="true" href="#inversion-des-x"><span class="icon icon-link"></span></a></h4>
<div class="hljs-code-div"><div class="hljs-line-numbers"><span></span><span></span><span></span></div><pre><code class="hljs language-css"><span class="hljs-selector-class">.flex-content</span> {
<span class="hljs-attribute">flex-direction</span>: row-reverse;
}
</code></pre></div>
<p><img src="/media/galleries/6585/b4c93d90-51f2-46e1-b88e-61f38264d22f.png"></p>