flex-direction: colonne; ne fonctionne pas

J'ai un ul tag avec display: flex.

J'en ai besoin commandé par colonne avec flex-direction: column;, mais il ne fonctionne pas.

css pour le conteneur

#nav li.four_columns ul.sub-menu {
  width: 600px;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-flow: wrap;
}

css pour l'enfant

#nav li.four_columns ul.sub-menu li {
  flex-basis: 25%;
  /* white-space: nowrap; */
  /* overflow: hidden; */
  /* text-overflow: ellipsis; */
  /* border-bottom: none; */
}

J'apprécie l'aide.

  • Changement flex-flow: wrap; à flex-wrap: wrap;
  • Merci pour votre réponse. Je chaged flex-flow: wrap; à flex-wrap: wrap; et je n'ai qu'une colonne, mais j'ai besoin de 4 colonnes.
InformationsquelleAutor Juan Pablo Fernandez | 2016-06-30
  1. 9

    Ici est la source de votre problème: flex-flow: wrap

    C'est une abréviation de la propriété pour flex-direction et/ou flex-wrap.

    Les valeurs initiales de cette propriété sont row nowrap.

    Vous n'avez qu'a déclaré le flex-wrap composant: wrap.

    Cela signifie que le flex-direction composant reste la valeur par défaut: row.

    Par conséquent, votre flex articles sont en alignant horizontalement dans une rangée qui l'encapsule.

    Comme une solution, spécifier deux composantes:

    flex-flow: column wrap

    OU, puisque vous avez déjà flex-direction: column dans la règle, supprimer flex-flow et d'utilisation:

    flex-wrap: wrap

    Aussi important: Si vous voulez flex éléments d'envelopper dans la colonne de direction, vous avez besoin de définir une hauteur sur le conteneur. Sans une hauteur fixe, le flex éléments ne sais pas où pour envelopper et ils vont rester sur une seule colonne, d'élargir le conteneur en tant que de besoin.

    Référence:

    • Merci pour votre réponse. Il fait sens, mais maintenant je n'ai qu'une seule colonne et j'ai besoin de 4. Pourriez-vous s'il vous plaît dites-moi comment faire pour diviser le contenu sur plusieurs colonnes ?
    • Essayez quelque chose comme ça sur le sous-menu contenant: height: 375px.
    • Merci beaucoup @Michale_B j'ai ajouté un max de hauteur à la règle.
    InformationsquelleAutor Michael_B