J'ai pas pigé le systeme de placement avec Flex

[Visiteur]

Salut

Je suis en train d'apprendre à utiliser Grid et Flex. J'ai fait une mise en page avec Grid pour personnaliser l'affichage en blog et maintenant je voudrais faire la même chose mais avec Flex. J'ai réussis avec Grid mais là je butte avec Flex. Voila ce que j'ai fait avec grid et là avec Flex.

J'ai assez vite pigé avec Grid vue que c'est pour une mise en page en tableau. Mais avec Flex, malgré les divers tutos que j'ai pu lire, j'ai du mal a comprendre comment placer les éléments.

[ghazal]

Salut,
apparemment, tu coinces sur "order".

D'abord une très bonne référence :

CSS Flexible Box Layout - CSS: Cascading Style Sheets | MDN

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout

order -> https://developer.mozilla.org/en-US/docs/Web/CSS/order
align-items -> https://developer.mozilla.org/en-US/...SS/align-items

J'ai fait un exemple qui focalise sur order :

https://codepen.io/ghazalp/pen/WgNNdg

Joue sur la valeur de :

.child--featured {
order: 1;
}

1, -1, etc..

J'ai rajouté une mediaquery sur flex-direction pour montrer la simplicité de l'opération.

[Visiteur]

Merci pour les liens. J'avais déjà vue les articles sur flex de developer.mozilla.org (mais en fait sans avoir vraiment pigé), mais quant tu ma dit de jouer sur la valeur -1 de order j'ai compris et dans mon cas je devais aussi ajouter un flex. Mais il faut aussi jouer dans l'organisation du HTML. Moi j'ai regroupé les div blog-h2 et intro-article de manière a avoir la mise en page que je voulais. Je pense avoir saisi le truc. J'ai mis a jour mon codepen avec le flex.

En fait j'ai mis un flex car dans un exemple se trouvant dans l'article Ordonner les éléments flexibles (au paragraphe sur order) ce trouvait flex: 1 0 100%; et quant je l'ai mis dans mon codepen ça a marché. Mais sans avoir compris comment marche exactement flex-grow et flex-shrink. Car j'ai utilisé flex avec le block de l'image d'intro et le block où se trouve le titre de l'article et le paragraphe d'intro.

[ghazal]

flex: 1 est un raccourci (shorthand) de :

flex: 1;
<=>
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;

Ca s'applique à l'enfant du conteneur défini par :

display:flex

Une bonne explication :

https://css-tricks.com/almanac/properties/f/flex/

Dans cet article, regarde "Related properties" pour les définitions et exemples de :

• flex-grow
• flex-shrink
• flex-basis

Des articles en français :

https://la-cascade.io/tag/flexbox/

http://www.leprogrammeurmarocain.com/category/programmation/css/

N'hésite pas à poser des questions, cela me permet de réviser flex

[lomart]

Bonjour,

Pour UP, j'ai créé une feuille CSS Flexgrid légère (5.7Ko) qui essaie de gérer tous les cas courants.
Tu peux regarder son usage ici : https://up.lomart.fr/test/css-flexgrid
Le fichier SCSS dans UP est documenté. Si cela peut t'aider à voir l'utilisation des propriétés
J'ai mis en PJ une version non compressé du CSS et le SCSS

[Visiteur]

Merci pour toutes ces pistes. Je vais me pencher la dessus . Car a voir ce qui est possible de faire avec le peu que j'ai utilisé, j'ai vraiment envie de comprendr.