1397 sujets

Web Mobile et responsive web design

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.
Modérateur
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. Smiley biggrin
Alsa le dit, pensez à fermer vos balises.
https://www.alsacreations.com/actu/lire/370-pensez-a-fermer-vos-balises.html
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; }
.
Bonjour,
Je penses que tu comprends, que créer un Grid va te faciliter la gestion de tout ton contenu lors de la responsivité, en effet tout les contenants (div et autres ) resteront dans la zone ou ils ont été placés, par exemple même sit tu as 200 lignes dans ton footer, en trente seconde si, dans la définition de ton array de GRID tu mets footer en premier, tou son contenu apparaîtra en tête !
Tu comprends ?
Modifié par Jean-Pierre-Bruneau (18 Jun 2020 - 03:06)
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; }
Mais c'est inutile, fait un seul footer et coupes le en div que tu désigne comme WRAP en portable !
Va sur un de mes sites, clic droit et ==> afficher le code de la page tu verra c'est trés simples cliques sur le CSS tu comprendra comment c'est diviser et ensuite je suis libre !!
http://www.fox-infographie.com/
Modifié par Jean-Pierre-Bruneau (19 Jun 2020 - 04:50)
Salut,
cette discutions a été utile. L'erreur est identifiée. En passant, flexbox est bien mieux supporté par les Apple de la série anciens iPad mini et autres que grid.
@vzytoi
trois ??? ne sont pas une réponse, il faut donner quelques explications Smiley cligne
Modérateur
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

Smiley smile
É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).
Merci à tous,
j'ai changé deux lignes de code et ça fonctionne. Par contre, j'ai été obligé de laisser "flex-wrap: wrap;" sur .foot, sinon j'avais toutes les div serrées (et étroites) les unes contre les autres en mode mobile, au lien d'êtres les unes au-dessus des autres.
Meilleure solution