web-dev-qa-db-fra.com

Comment créer plusieurs colonnes à partir d'une liste unique non ordonnée?

Je voudrais créer une liste multi-colonne comme ceci: https://jsfiddle.net/37dfwf4u/

Aucun problème lorsque vous utilisez une liste différente pour chaque colonne:

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
</ul>
<ul>
    <li>item5</li>
    <li>item6</li>
    <li>item7</li>
    <li>item8</li>
</ul>

ul {
    display:inline-block;
}

Cependant, cela peut-il être fait avec une liste continue et du CSS pur afin que le CSS organise automatiquement les colonnes? Par exemple. en utilisant une mise en page flexible que je ne connais pas encore?

csscss3flexboxhtml-listscss-multicolumn-layout
26
Sempervivum

Oui, vous pouvez créer une liste de plusieurs colonnes comme décrit si vous faites du ul un conteneur flex, changez le flex-direction à column, laissez-le envelopper en appliquant flex-wrap: wrap et l'oblige en outre à envelopper en limitant son height:

ul {
  height: 100px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
<ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
  <li>item6</li>
  <li>item7</li>
  <li>item8</li>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
  <li>item6</li>
  <li>item7</li>
  <li>item8</li>
  <li>item4</li>
  <li>item5</li>
  <li>item6</li>
  <li>item7</li>
  <li>item8</li>
</ul>
35
Johannes

Pensez à utiliser la disposition multi-colonnes CSS3 pour cela:

colonnes multiples CSS

Vous pouvez le faire en utilisant une seule liste et définir le nombre de colonnes avec CSS. Si vous vérifiez le support du navigateur de disposition multi-colonnes CSS3 ici vous pouvez voir un support partiel de la plupart des navigateurs, car ils ne supportent pas les propriétés break-before, break-after et break-inside. Mais ils prennent en charge les propriétés dont vous aurez besoin pour créer une liste à plusieurs colonnes avec un préfixe.

.container {
  -webkit-column-count: 2; /* Chrome, Safari, Opera */
  -moz-column-count: 2; /* Firefox */
  column-count: 2;
}

ul {
  margin: 0;
}
<div class="container">
  <ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
    <li>item6</li>
    <li>item7</li>
    <li>item8</li>
  </ul>
</div>
15
Greg