1
votes

À propos de l'ordre et de la direction de la liste dans CSS Flexbox

Si vous listez la liste avec flex, cela ressemble à quelque chose comme ça.

<ul class="list_number">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

Comment puis-je organiser cela dans flex comme ça? Y a-t-il un moyen de le faire?

.list_number {
  display: flex;
  flex-wrap: wrap;
}
.list_number > li {
  width: 50%
}

Au fait, en cas d'augmentation à sept

C'est comme le sentiment.

14
25
36

12
34
56

css flexbox

2 commentaires

Je pense que les colonnes sont plus appropriées dans ce cas: developer.mozilla.org/ fr-FR / docs / Web / CSS / colonnes

jsfiddle.net/kjusobmd

3 Réponses :

0
votes

flex-direction: column et max-height devraient faire l'affaire.

1 commentaires

Veuillez poster une réponse complète. Montrez-nous comment votre réponse fonctionne.

0
votes

Si vous êtes ouvert à une approche JavaScript, vous pouvez simplement récupérer la hauteur d'un élément

(en supposant que tous les éléments sont identiques height), multipliez-le par la moitié du nombre de 's à l'intérieur de votre élément et définissez la hauteur de ul sur cette valeur. ( Si le nombre de est un nombre impair , ajoutez simplement la hauteur de un autre code> à la valeur. )

Assurez-vous également que le conteneur flex parent .list_number a les propriétés flex-direction: column; code > et flex-wrap: wrap; pour que les éléments passent automatiquement dans la colonne suivante lorsque les éléments précédents ont rempli la hauteur.

Vérifiez et exécutez le Code Extrait de code ci-dessous pour un exemple pratique de ce que j'ai décrit ci-dessus:

<!-- HTML -->

<ul class="list_number">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

/* CSS */

html, body {width: 100%; height: 100%; margin: 0px; padding: 0px;}

.list_number{
  list-style: none;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

/* JavaScript */
const div = document.querySelector(".list_number");
const lists = document.querySelectorAll(".list_number li");
const height = window.getComputedStyle(lists[0]).height;

div.style.height = (lists.length % 2 == 0) ? (parseInt(height) * lists.length / 2) + "px" : (parseInt(height) * lists.length / 2) + parseInt(height) + "px";

0 commentaires

2
votes

Il existe de nombreuses façons d'y parvenir, mais comme @TemaniAfif l'a mentionné dans les commentaires, la méthode la plus simple pour ce faire serait d'utiliser des colonnes comme celle-ci:

ul{
    columns: 2;
 }

Ajoutez simplement cela à votre css et vous pouvez réaliser la même chose avec une seule ligne de code.

J'espère que cela vous aidera.

2 commentaires

Il s'agit probablement de l'approche CSS la plus claire et la plus simple pour ce faire. +1

Oh je n'ai pas vu son commentaire, mais en tout cas, merci monsieur