Partage

flexbox : remplir l'écran avec éléments

Sujet résolu

1 décembre 2016 à 12:04:24

Bonjour à tous,

Voilà quelques jours que je bloque sur une partie d'exercice, et je crois que soit je commence à perdre le recul nécessaire pour trouver mon erreur soit j'ai mal saisi quelque chose dans l'utilisation des flexboxs, ce qui me semble fort probable aussi, je m'explique :

Je dois arriver à ça :

(5 rectangles de couleur différente qui prennent toute la largeur/hauteur de page + second élément qui fait le double des autres + petits blocs blanc & noir de 50px de large sur la droite de chaque bloc couleur - sans utiliser border)

J'en suis donc arrivé au code suivant :

<!doctype html>

<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="style.css" />
		<title>Exercice containers</title>
	</head>
	
	<body>

	<section>

		<div id="ligne1">
			<div id="rectangle1rouge">
				<h1>rectangle numéro 1</h1>
			</div>
			<div id="blocFin1"></div>
		</div>

		<div id="ligne2">
			<div id="rectangle2vert">
				<h1>rectangle numéro 2</h1>
			</div>
			<div id="blocFin2"></div>
		</div>

		<div id="ligne3">
			<div id="rectangle3jaune">
				<h1>rectangle numéro 3</h1>
			</div>
			<div id="blocFin3"></div>
		</div>

		<div id="ligne4">
			<div id="rectangle4bleu">
				<h1>rectangle numéro 4</h1>
			</div>
			<div id="blocFin4"></div>
		</div>

		<div id="ligne5">
			<div id="rectangle5orange">
				<h1>rectangle numéro 5</h1>
			</div>
			<div id="blocFin5"></div>
		</div>

	</section>
	</body>
</html>

Et pour le CSS

body
{
	text-transform: uppercase;
	display: flex;
	flex-direction: column;
	text-align: center;
	color: white;
	margin: auto;
}

#ligne1, #ligne3, #ligne5
{
	background-color: black;
}

#ligne1, #ligne2, #ligne3, #ligne4, #ligne5
{
	display: flex;
	flex-direction: row;
}

#rectangle1rouge
{
	background-color: red;
	width: 100%;
}

#blocFin1, #blocFin2, #blocFin3, #blocFin4, #blocFin5
{
	width: 50px;
}

#rectangle2vert
{
	background-color: green;
	width: 100%;
}

#rectangle3jaune
{
	background-color: yellow;
	width: 100%;
}

#rectangle4bleu
{
	background-color: blue;
	width: 100%;
}

#rectangle5orange
{
	background-color: orange;
	width: 100%;
}

J'ai donc traité chaque ligne (comprenant le rectangle de couleur + le bloc de fin noir ou blanc) indépendamment c'est ce qui me paraissait le plus judicieux pour intégrer ces petits blocs de 50px en fin de ligne, pensant doubler la seconde ligne (#ligne2) avec la propriété flex, et étirer la <section> comprenant toutes les lignes sur toute la hauteur de la page, mais quoi que je tente, j'en arrive inexorablement à ça :

Bien entendu je ne demande pas la solution, mais si quelqu'un pouvait juste m'indiquer une direction dans laquelle creuser pour trouver mon erreur, ce serait ROYAL!!

D'avance merci à celle ou celui qui saura m'éclairer (et m'évitera de m'arracher les quelques cheveux qu'il me reste)!!

-
Edité par Rolan65 1 décembre 2016 à 12:06:30

Lamecarlate

1 décembre 2016 à 12:11:38

Bonjour,

de ce que j'en comprends, ton problème est que la ligne verte ne fait pas la hauteur voulue ? Ou bien c'est autre chose ?

Pas d'aide concernant le code par MP, le forum est là pour ça :)

Rolan65

1 décembre 2016 à 12:29:29

Oui c'est ça, la ligne verte ne fait pas 2 fois la taille des autres blocs, et mes tentatives pour que l'ensemble des lignes prennent toute la hauteur de la page restent vaines.. :/

EmmanuelBeziat

1 décembre 2016 à 12:31:56

Salut,

Arrête les ID, utilise les classes. Garde les ID pour les ancres. Tu peux réutiliser tes classes sans problème, plutôt que de définir des propriétés identiques pour différents ID.

Et arrête aussi d'utiliser width: 100%;, c'est définitivement une mauvaise idée.

Bon, je vais relire plus en détails ta description, si Lamecarlate ne me grille pas (:p) je te ferais un exemple fonctionnel après avoir mangé.

-
Edité par EmmanuelBeziat 1 décembre 2016 à 12:36:45

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

Rolan65

1 décembre 2016 à 12:36:43

Oui il me semblait bien qu'il y avait déjà un problème au niveau du html, je n'étais vraiment pas sûr de moi sur cette organisation là.

Je vais repartir de zéro en privilégiant l'utilisation de classes plutôt que des ids alors.. je reviens vers vous vous dire si j'y arrive.

Merci!!

rhooManu a écrit:

Et arrête aussi d'utiliser width: 100%;, c'est définitivement une mauvaise idée.

Bon, je vais relire plus en détails ta description, si Lamecarlate ne me grille pas (:p) je te ferais un exemple fonctionnel après manger.

-
Edité par rhooManu il y a moins de 30s

Ok pour ça aussi!! xD

Bon je comprends que la source de mes problèmes vient surtout de la façon dont j'organise mon html donc? Je vais essayer de bosser là dessus... et jsuis ultra preneur pour l'exemple fonctionnel!!

Re-Merci pour ces tuyaux!!

-
Edité par Rolan65 1 décembre 2016 à 12:39:43

Rasgardo

1 décembre 2016 à 12:40:43

Si j'ai bien compris, tu as 2 problèmes :

1 tes lignes ne prennent pas toutes la page.
2 ta deuxième ligne est de la même taille que les autres.

Pour le premier point, il y a une astuce mais je ne sais pas si elle est "correct" ou "optimal". Pour que ton élément prennent toutes la hauteur de la page, il faut que tous les éléments parents aient height:100%. Donc ici, la balise html, la balise body et la balise section. Je laisse d'autres lecteurs confirmer ou infirmer ou proposer une autre méthode.

ou alors un petit height: 100vh; sur ta balise section;

Pour doubler la taille de la deuxième ligne, je te laisse chercher du coté de la propriété flex.

Rolan65

1 décembre 2016 à 12:46:20

YvesEychenne1 a écrit:

Si j'ai bien compris, tu as 2 problèmes :

1 tes lignes ne prennent pas toutes la page.

2 ta deuxième ligne est de la même taille que les autres.

Pour le premier point, il y a une astuce mais je ne sais pas si elle est "correct" ou "optimal". Pour que ton élément prennent toutes la hauteur de la page, il faut que tous les éléments parents aient height:100%. Donc ici, la balise html, la balise body et la balise section. Je laisse d'autres lecteurs confirmer ou infirmer ou proposer une autre méthode.

ou alors un petit height: 100vh; sur ta balise section;

Pour doubler la taille de la deuxième ligne, je te laisse chercher du coté de la propriété flex.

Effectivement ce sont bien 2 problèmes distincts, et à vrai dire j'ai déjà tenté d'appliquer les heights à 100% ainsi que flex, sans succès.

Comme me l'indiquait rhooManu précédemment, je pense que la source des 2 problèmes vient sans doute de mon code html et de la façon dont je l'ai organisé, qui ne me permet pas d'effectuer les transformations que je souhaite de manière efficace ou évidente.

-
Edité par Rolan65 1 décembre 2016 à 13:03:37

EmmanuelBeziat

1 décembre 2016 à 13:01:58

Non, effectivement ce n'est pas très optimal. L'idée d'utiliser les vh est meilleure, mais avec un min-height, pour laisser s'étendre le contenu en cas de besoin.

@Rolan65 Ton html est ok, à part qu'il faudrait remplacer tous ces ID.

Bref, voici un exemple : https://jsfiddle.net/b18g8mLd/1/

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

Rolan65

1 décembre 2016 à 13:27:59

rhooManu a écrit:

@Rolan65 Ton html est ok, à part qu'il faudrait remplacer tous ces ID.

Bref, voici un exemple : https://jsfiddle.net/b18g8mLd/1/

Oui, c'est ce que j'ai cru comprendre pour les id... xD Du coup, (avant que je ne regarde ton exemple sur jsfiddle), j'avais modifié mon html pour le faire ressembler à ça :

<!doctype html>

<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="style.css" />
		<title>Exercice containers</title>
	</head>
	
	<body>

	<section>

		<div class="fondNoir">
			<div class="rectangle">
				<h1>rectangle numéro 1</h1>
			</div>
			<div class="bloc"></div>
		</div>

		<div class="fondBlanc">
			<div class="rectangle">
				<h1>rectangle numéro 2</h1>
			</div>
			<div class="bloc"></div>
		</div>

		<div class="fondNoir">
			<div class="rectangle">
				<h1>rectangle numéro 3</h1>
			</div>
			<div class="bloc"></div>
		</div>

		<div class="fondBlanc">
			<div class="retangle">
				<h1>rectangle numéro 4</h1>
			</div>
			<div class="bloc"></div>
		</div>

		<div class="fondNoir">
			<div class="rectangle">
				<h1>rectangle numéro 5</h1>
			</div>
			<div class="bloc"></div>
		</div>

	</section>
	</body>
</html>

Mais du coup j'ai été voir l'exemple jsfiddle, je comprends à peu près tout l'ensemble du code (les nt-child j'avais complètement mis de côté, à tort!!), sauf toujours cette partie qui est liée aux blocs noirs et blancs :

.section::after {
  content: "";
  width: 30px;
}

.section:nth-child(odd)::after {
  background: black; 
}
.section:nth-child(even)::after {
  background: white; 
}

Ces "::after" et "(odd)" / "(even)" me sont complètement étrangers pour être honnête.. Pour le coup, je comprends à peu près à quoi ils servent mais j'ai du mal à comprendre le "comment"?

-
Edité par Rolan65 1 décembre 2016 à 13:33:08

EmmanuelBeziat

1 décembre 2016 à 13:31:29

Donne des noms fonctionnels à tes classes, plutôt que des noms descriptifs. Le style peut être amené à changer, et un "blocRouge" pourrait devenir bleu… Si tu l'appelles "sectionMain", peu importe qu'il soit rouge, bleu ou vert.

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

Lamecarlate

1 décembre 2016 à 14:12:34

Et sinon, puisqu'on en est à utiliser le modèle flexbox, un petit flex: 2 0 0% sur la partie verte, ça ferait pas l'affaire ?

Pas d'aide concernant le code par MP, le forum est là pour ça :)

Rolan65

2 décembre 2016 à 10:50:32

Bonjour et veuillez m'excuser d'avoir un peu tardé à répondre... pour être honnête, j'ai tout recommencé à zéro!!

Le jsfiddle de rhooManu m'a remis en tête une technique que j'avais mis de côté pour cibler les éléments enfants (le nth-child() ), et il est vrai qu'en partant tête baissée j'avais multiplié les id dans mon html (et qui plus est nommés de manière trop descriptive) ce qui me compliquait un peu la tache pour cibler aisément mes éléments... :/

Par contre ce petit exercice m'aura permis de découvrir les sélecteurs (odd) et (even) - bien pratiques pour sélectionner les pair / impair - que je ne connaissais pas, grâce encore une fois au jsfiddle de rhooManu et à quelques recherches, ainsi que la notation ::after pour ajouter un élément à la suite d'un élément sélectionné.

Du coup tout fonctionne et j'aurai appris des trucs, donc un gros merci à tous de votre aide!

ps : @rhooManu promis à l'avenir je ferai attention en nommant mes classes & id : moins descriptifs!! Encore merci du conseil!!!

EmmanuelBeziat

2 décembre 2016 à 11:30:55

Mais je t'en prie.

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !