[Résolu] Mélange flexbox/grid

Bonjour,
il y a une chose que je ne comprends pas avec flexbox ou grid, c'est la parentalité, si on peut s'exprimer comme ça. Je m'explique, quand on déclare quelque part dans le code display: flexbox ou grid, je suppose que cette déclaration est active pour tout le site, en un mot tout ce qui suit. Et si, comme je l'ai déjà fait, on mélange flexbox et grid, que devient grid au milieu de flexbox, ou l'inverse ? Il n'y a pas de balise de fermeture de la déclaration. Ça semble fonctionner ensemble sans autre questionnement, mais je suis curieux du mécanisme mis en jeu.
Autre cas, j'ai un exemple où flexbox avait bien été déclaré dans un code de site "one page" pour les différentes sections de background. Le footer était absent de la proposition car ce n'était pas un template de site. J'ai dû en ajouter un en déclarant de nouveau flexbox, sinon, la mise en page du footer n'était pas en flexbox.
Par exemple, j'ai ça :

section {
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	text-align: center;
  	flex-direction: row;
  	height: 100vh;
  	background-size: cover;
  	background-repeat: no-repeat;
  	background-attachment: fixed;
  	padding: 2vw;
  	box-sizing: border-box;
	}
	Loin sur la page, j'ai dû déclarer :
.foot {
	display: flex;
	flex-direction: row;	
        height: auto;
	font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
	font-size: .8em;
	padding: .4em;
	background-color: lightgray;
	} 

Merci de m'éclairer à ce sujet.

Salut,

Bongota a écrit :
Je m'explique, quand on déclare quelque part dans le code display: flexbox ou grid, je suppose que cette déclaration est active pour tout le site, en un mot tout ce qui suit.

Heu.... what ?
C'est valable que pour l'élément ciblé. Comme un border par exemple. Si tu mets un border rouge sur ton body, tout tes éléments ne vont pas l'avoir.

<div class="parent">
  <div class="enfant"></div>
</div>

.parent {
  display: grid;
}

Seul le parent est en grid. l'enfant se placera dans la grid mais sera une div comme une autre. Comme s'il avait été en dehors de la grid.

Bongota a écrit :
Et si, comme je l'ai déjà fait, on mélange flexbox et grid, que devient grid au milieu de flexbox, ou l'inverse ?

Bah ils sont indépendant. Ca marche très bien.

Bongota a écrit :
Il n'y a pas de balise de fermeture de la déclaration.

Depuis quand on a des "balises de fermetures" dans le CSS ?

Merci, tu répondu à mes questions.
Je ne m'étais pas bien fait comprendre. Si on déclare un contenant général sous grid, wraper, par exemple, tout ce qui sera dans ce contenant sera sous l'influence de grid, mais ce sont les grilles obtenues qui seront grid, pas les div introduites. Et ça, jusqu'au bout de la page, c'est ce que je voulais dire. Et si on décide d'introduire du flexbox au milieu de ce wraper, ce sera sur un autre contenant, si j'ai bien compris. Comment les deux se débrouillent, c'est une autre histoire.
J'ai parlé de fermeture de balises sur un ton ironique, sachant que l'on ne fermait pas les déclarations de grid ou flexbox. Et j'aurais dû dire "fermetures de balises" et non "balises de fermeture". Inversion, quand tu nous tient.
Alsa le dit, pensez à fermer vos balises.
https://www.alsacreations.com/actu/lire/370-pensez-a-fermer-vos-balises.html

Concernant ta question sur l'affectation des wrap ou no-wrap, tu peux aller regarder ça :
https://www.w3schools.com/cssref/playit.asp?filename=playcss_flex-wrap&preval=wrap

Merci,
j'ai regardé le lien, c'est très parlant, avec l'exemple en direct à droite.
Je crois que même les questions qui paraissent évidentes pour certains sont utiles pour d'autres. Avant de le mettre en pratique, j'aurais pensé que les items d'un footer allait se placer dans le contenant général, en flexbox. Ça n'a pas été le cas chez moi, j'ai dû refaire un contenant en flexbox pour le footer et j'ai découvert à cette occasion la commande flexbox suivante pour réagencer les items en version mobile :

foot :nth-child(1) { order: 2; }
.foot :nth-child(2) { order: 1; }
.foot :nth-child(2) { order: 1; }

.

C'est bien ce que j'ai fait dans un site en grid, le footer est dans le contenair grid et tout fonctionne correctement. Pour l'autre site en flexbox que je viens de terminer, ça n'a pas fonctionné de la même façon, j'ai dû refaire un contenant flex pour le footer. Très certainement, je pourrais revoir ça. Il est vrai que le footer en grid n'a qu'une seule colonne, qui se rétrécit ou s'allonge suivant les formats d'écran. Pour le site en flexbox, je suis parti sur trois colonnes pour le footer, afin de différencier ses parties. C'était un peu plus compliqué, notamment en mobile, où il fallait mettre les différentes class les unes en dessus des autres, d'où les commandes "order" ci-dessous. Les deux sites sont en ligne, provisoirement chez free, si tu veux comparer, je peux mettre les liens.
En grid (avec tout ce qui va avant, bien sûr) :

.footer
	{-ms-grid-column: 1;
	grid-column: 1; 
  	-ms-grid-row: 8; 
  	grid-row: 8;}

en flexbox :

.foot {
	display: flex;
	flex: 1;
	flex-direction: row;
	flex-wrap: wrap;
	height: auto;
	font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
	padding: .4em 0 0 0;} 
.foot :nth-child(1) { order: 2; }
.foot :nth-child(2) { order: 1; }
.foot :nth-child(2) { order: 1; }
.logos {
        width: 10em;
	background-color: gray;
	padding: 2em;}
.textecopy {
	color: black;
	line-height: 1em;
	text-align: justify;}
.copyright {
	width: 48em;
	background-color: gray;
	padding: 1em;}
.mentions {
	width: 11.4em;
	background-color: gray;
	padding: 1em;}
}

???

.foot :nth-child(1) { order: 2; }
.foot :nth-child(2) { order: 1; }
.foot :nth-child(2) { order: 1; }

Hello,

Sorry si je rate quelque pcq je n'ai pas tout lu mais dans ce code

.foot :nth-child(1) { order: 2; }
.foot :nth-child(2) { order: 1; }
.foot :nth-child(2) { order: 1; }

il y a deux chose que je changerais:
- Il n'y a que la première d'utile, donc supprimer la seconde et la troisième ligne (par défaut, la valeur order est de 0 ou inherit je ne sais pas, mais si tu assignes 1 ou -1 a un seul élément, tu l'auras en premier ou en dernier à coup sûr
- Ajoute peut-être un sélécteur d'enfant direct (>) pour être certains de pas donner un ordre à quelque chose plus bas de ton .foot

Ah, j'aime mieux.
Merci pour cette précision.
Bonne journée.

Étrange, quand je supprime les deux secondes lignes, comme tu le préconise, le footer est toujours en place, mais les deux parties les plus étroites du footer se placent l'une à côté de l'autre, ce qui n'est pas beau, elle deviennent très longues et étroites. Alors qu'avec les trois lignes de code, j'ai bien tous les éléments du footer les uns en dessous des autres, dans toutes la largeur (en mode mobile évidemment).