Flex-basis: auto et width non pris en compte

Salut.

Selon MDN (https://developer.mozilla.org/fr/docs/Web/CSS/flex-basis) la valeur flex-basis par défaut est "auto".
Toujours selon MDN, « "auto" fait […] référence à la propriété height ou width ». J'en conclu donc que si un flex-item a une taille définie (un "width" par exemple pour un flex-container en "row"), le flex-basis de cet élément est égal à cette taille. C'est d'ailleurs ce que semble aussi dire : https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Pourtant, dans ce CodePen : https://codepen.io/Ogham/pen/QWaarxG, on peut voir que les flex-item sont réduit et ne respectent pas leur "width" et je ne comprends pas pourquoi ? Est-ce flex-shrink par défaut de 1 qui fait que les flex-items sont réduits quoiqu'il arrive s'ils ne tiennent pas dans le flex-container, et ce malgré la taille définie ?

Merci pour vos lumières…
Modifié par Derwoed (04 Apr 2022 - 20:40)

Bonsoir,

Dans ton exemple, flex-shrink a une valeur de 1 , valeur par défaut qui s'applique. Le parent a, part defaut, flex-wrap calée sur no-wrap (il n'etait pas necessaire de le redefinir). Il n'y a là donc pas d'autre choix que reduire les 2 enfants pour qu'ils tiennent dans le parent.

Sur les enfants : flex-shrink:0 ; fera débordé les enfants de leur parent sans les rétrécir si celui-ci n'est pas assez large.

Sur le parent , flex-wrap:wrap; fera un passage à la ligne , mais les enfants auront une largeur maximale égale au parent, sauf si flex-shrink est passé à 0 , alors ils pourront aussi débordés en conservant leur largeur attribuée.

Enfin, min-width , devrait l'emporter sur width et flex-basis.

Cdt
Modifié par gcyrillus (04 Apr 2022 - 21:31)

Bonjour.

Ce que vous mentionnez est tout à fait vrai et correspond à ce que j'en avais conclu. Y compris la prépondérance de min-width. Toutefois, j'en reste surpris vu que cela semble aller à l’encontre de ce qu’explique MDN et CSS-tricks, à savoir qu’avec les réglages par défaut, un flex-item qui a une taille définie garde cette taille. Pour que ceci soit vrai, il faut soit mettre un min-width, soit forcer le flex-shrink…

PS : le but étant de faire un carrousel, c'est normal qu'il n'y ait qu'un seul flex-item d'affiché à la fois dans le parent… les autres doivent être en-dehors…
Modifié par Derwoed (07 Apr 2022 - 09:52)