Flex et colonnage

Bonjour,
dans mon css j'ai :

.colcont {margin:0;
  display: flex; /*important*/
  flex-direction: row;
  flex-wrap: wrap;}
.col {
  background: pink;
  margin: 1em;
  flex: 1; /*important*/
}

dans mon html je met :

<div class="colcont">
<div class="col ">...</div>
<div class="col ">...</div>
<div class="col ">...</div>
</div>

Mes colonnes sont ok pas de soucis sur pc, par contre lorsque je suis sur smartphone j'aimerai n'avoir qu'un seule colonne par ligne et actuellement dans cette configuration j'ai deux colonnes l'une à coté de l'autre et la troisième seule en dessous. Comment faire pour imposer une seule colonne par ligne ?

Hello,

Si tu veux absolument le faire en Flexbox, tu as deux solutions :
1- les Media Queries : https://www.alsacreations.com/article/lire/930-css3-media-queries.html
2- l'astuce dite du "Holy Albatross" : https://codepen.io/raphaelgoetter/pen/KJveoX

Bon week-end

merci pour l'info.
j'ai essayé avec les media quieries mais sa ne fonctionne pas...
une idée du pourquoi ?
La partie de mon css est la suivante :

.colcont {margin:0;
  display: flex; /*important*/
  flex-direction: row;
  flex-wrap: wrap;}
.col {
  margin: 1em;
  flex: 1; /*important*/
  position:relative;
  padding-bottom:30px;
}

@media only screen and (max-width:500px){
.col {
    display:block;
    clear:both;
}
}
@media only screen and (max-width:700px){
.col {
    display:block;
    clear:both;
}
}
@media only screen and (max-width:800px){
.col {
    display:block;
    clear:both;
}
}

hello, je pense que tu devrais plutôt faire ton display:block; reset sur .colcont, car .col, en block ou autre, restent des enfant de ton élément en display:flex. ou bien tu leur fait un reset sur min-width ou flex-basis pour qu'ils occupent toute la largeur de la ligne. (clear, c'est dans un contexte d'elements en float qu'on l'utilise )
Modifié par gcyrillus (04 Mar 2019 - 19:01)

Bonjour,
Un exemple avec un break point à 500

https://codepen.io/Zonecss/pen/ZPLRQB