Demande d'aide pour Flexbox par Hazzz - page 1

Bonjour,

Je suis en train d'apprendre le fonctionnement de flexbox et dans le cadre d'un exercice je test plusieurs possibilités de positionnement.

Voici mon code HTML :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CV Rémi GOUTTEFANGEAS</title>
		<link rel="stylesheet" type="text/css" href="MISE_EN_PAGE_CV.css">
	</head>

		<body>
			
			<header class="barre-horizontal">
					<div class="conteneur-titre">
						<h1 class="titre">Rémi GOUTTEFANGEAS</h1>
						<h2 class="sous-titre">Apprentis développeur web</h2>
					</div>
			</header>

			<nav class="barre-vertical">
					<div class="conteneur-menu">
						<h3 class="menu"><a href="Mon expérience">Mon expérience</a></h3>
						<h3 class="menu"><a href="Mes compétences">Mes compétences</a></h3>
						<h3 class="menu"><a href="Ma formation">Ma formation</a></h3>
					</div>
			</nav>

			<section class="zone-cv">
				<div class="conteneur-cv">
						<div class="rubriques">
							<h2>Mon expérience</h2>
								<p>sdfsdfdsfdssdfdsfdsfdsfjdsfdskfgdsjfhd<br>fgdsfhdfgdsfdsfdsf
								dsfsdfdsfsdfdsfsdffdsfdsfdsfd<br>sfdsfdfdsf
								sdfsdfdsfsdfdsfdsfdsfsdf<br>sdfsdfsdfsdfsdf
								sdfdsfsdfdsfdsfsdfsdfdsfsdfsdf</p>
						</div>
						
						<div class="rubriques">
							<h2>Mes compétences</h2>
								<p>sdfsdfdsfdssdfdsfdsfdsfjdsfdskfgdsjfhd<br>fgdsfhdfgdsfdsfdsf
								dsfsdfdsfsdfdsfsdffdsfdsfdsfd<br>sfdsfdfdsf
								sdfsdfdsfsdfdsfdsfdsfsdf<br>sdfsdfsdfsdfsdf
								sdfdsfsdfdsfdsfsdfsdfdsfsdfsdf</p>
						</div>

						<div class="rubriques">
							<h2>Ma formation</h2>
								<p>sdfsdfdsfdssdfdsfdsfdsfjdsfdskfgdsjfhd<br>fgdsfhdfgdsfdsfdsf
								dsfsdfdsfsdfdsfsdffdsfdsfdsfd<br>sfdsfdfdsf
								sdfsdfdsfsdfdsfdsfdsfsdf<br>sdfsdfsdfsdfsdf
								sdfdsfsdfdsfdsfsdfsdfdsfsdfsdf</p>
						</div>
				</div>
			</section>

		</body>
</html>

Voici mon code CSS :

@font-face {
	font-family: "roboto-light";
	src: url('POLICE/Roboto-Light.ttf') format('truetype'),
		url('POLICE/Roboto-Light.eot') format('eot'),
		url('POLICE/Roboto-Light.svg') format('svg'),
		url('POLICE/Roboto-Light.woff') format('woff');
}

.barre-vertical {
	background-color: grey;
	width: 20%;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;

}

.conteneur-menu {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
	margin-top: 52%;
	height: 80%;
}

.menu {
	font-family: "roboto-light";
	font-size: 170%;
}

a {
	text-decoration: none;
	color: white;

}

a:hover {
	text-decoration: underline;
}

.barre-horizontal {
	background-color: silver;
	position: fixed;
	top: 0;
	bottom: 80%;
	left: 20%;
	width: 80%;
	height: 20%;

}

.conteneur-titre {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	height: 20%;
}

.titre {
	font-family: "roboto-light";
	color: white;
}

.sous-titre {
	font-family: "roboto-light";
	color: white;
}

.zone-cv {
	position: fixed;
	border: 1px red;
	background-color: red;
	left: 20%;
	top: 20%;
	height: 80%;
	width: 80%;
}

.conteneur-cv {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	align-content: space-around;
}

Ma méthode n'est surement pas optimale du tout (comment faire autrement ?) mais globalement je suis arrivé à faire ce que je voulais sauf pour un seul truc.

Je n'arrive pas à centrer verticalement le "conteneur-cv" dans la "zone-cv". L'idée est d 'avoir les 3 rubriques (expériences etc...) centrées horizontalement et verticalement à l'intérieur de la "zone cv".

Merci d'avance pour votre aide.

Rémi.

EDIT: Voici une capture d'écran. C'est dégueulasse je sais mais je mets les couleurs pour me repérer.

-
Edité par Hazzz 21 juin 2018 à 11:34:25

Demande d'aide pour Flexbox

Demande d'aide pour Flexbox

Supprimer

Modérer

Signaler le message aux modérateurs