Je voudrais faire une liste verticale avec l'affichage Flex sur dernière chose, je n'ai pas toujours 20 sous-éléments, cela ne pourrait être que deux deux, et dans ce cas, je dois les avoir sur une seule colonne, Pas de multiples ... C'est pourquoi je n'ai pas utilisé de solution de mise en page CSS multi-colonnes et est tourné vers Flexbox. P> J'ai essayé avec jsfiddle: HTTPS: //jsfiddle.net/r69onzhy/4/ p> Comme vous pouvez le constater, il est défilé horizontalement em>, mais je voudrais l'avoir verticalement Strong>. P> p> Overflow: auto code> ou avec Overflow-y: auto code> mais l'un ni l'autre n'a travaillé. p>
<ul>
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
<li>Test 5</li>
<li>Test 6</li>
<li>Test 7</li>
<li>Test 8</li>
<li>Test 9</li>
<li>Test 10</li>
<li>Test 11</li>
<li>Test 12</li>
<li>Test 13</li>
<li>Test 14</li>
<li>Test 15</li>
<li>Test 16</li>
<li>Test 17</li>
<li>Test 18</li>
<li>Test 19</li>
<li>Test 20</li>
</ul>
3 Réponses :
ul {
display: flex;
list-style: none;
width: 210px;
height: 100px;
flex-direction: column;
flex-wrap: nowrap;
padding: 0;
margin: 0;
overflow: hidden;
overflow-y: auto;
li {
width: 100%;
}
}
Ok, mais comme je l'ai dit, je voudrais multiples colonnes ... c'est pourquoi j'ai besoin de la enveloppe ...
Supprimer Changement flex-direction: colonne code> Overflow: auto; code> à Overflow-y: auto; p> p> Si vous avez besoin de 3 éléments par ligne, utilisez P> li {
flex: 0 0 33.33%;
}
Ouais, ça marche mais ça change la direction ... J'ai besoin du deuxième article qui acheminé au bas de la première ... pas à droite
Utilisez flex-direction: tout écran de défilement;
Je ne connais pas cette propriété ... et je ne peux pas le trouver sur le Web. Je l'ai essayé mais mon navigateur m'a dit que c'était invalide ...
Il n'y a pas de propriété de ce type dans la spécification: w3.org/ TR / CSS-FLEXBOX-1 / # Flex-direction-propriété-propriété Pas sûr de l'endroit où vous l'avez. Inspectez le code pour voir que ce n'est pas valide et la supprimer pour avoir le même comportement sans cela. En d'autres termes, ça ne fait rien
Désolé, je n'ai pas vu cela sur la spécification.
Vous pouvez essayer la grille CSS.
Vous pouvez envisager l'utilisation de colonnes code > avec un emballage supplémentaire
p>
<div class="wrapper"><ul> <li>Test 1</li> <li>Test 2</li> <li>Test 3</li> <li>Test 4</li> <li>Test 5</li> <li>Test 6</li> <li>Test 7</li> <li>Test 8</li> <li>Test 9</li> <li>Test 10</li> <li>Test 11</li> <li>Test 12</li> <li>Test 13</li> <li>Test 14</li> <li>Test 15</li> <li>Test 16</li> <li>Test 17</li> <li>Test 18</li> <li>Test 19</li> <li>Test 20</li> </ul> </div>
Oui, j'essayais de cette façon avant d'utiliser Flex, mais c'est que je n'ai pas toujours 20 sous-menus, ils ne pouvaient être que 2 et dans ce cas, je les veux dans une colonne, mais avec cette solution, ils seraient dans des colonnes multiples. .. C'est pourquoi je me suis tourné vers la solution flexible ...
@Simontricherau Même avec Flexbox, je ne pense pas que vous puissiez le faire, d'avoir un nombre dynamique de colonnes et d'un défilement vertical. Il y a beaucoup de variable et le navigateur ne saura jamais quand envisager plus d'une colonne et pour ajouter le défilement.
Oui, j'ai bien peur que ce soit impossible ... mais c'est pourquoi j'ai demandé, de savoir s'il y avait une solution ...