Bonsoir,

je souhaiterai savoir comment aligner plusieurs éléments (<div>) sur le haut de ces éléments tout en centrant ces éléments sur la page...

Ce que je voudrais c'est que ces 3 sections (compétences, expériences, formation) soient centrée sur la page mais qu'elles soient alignées au niveau de leur titre.

J'ai pas mal tourné en rond avec le cours flexbox mais rien n'y fait.

Une âme charitable ? 

css

/*bloc droit*/

#blocdroit
{
	display: flex;
	position: absolute;
	left: 350px;
	right: 50px;
	height: 100%;
	justify-content: center;
	align-items: center;
}

#competences
{
	display: flex;
	flex-direction: column;
	width: 20%;
	margin: 10px;
}

#formation
{
	display: flex;
	flex-direction: column;
	width: 45%;
	margin: 10px;
	text-align: justify;
}

#experience
{
	display: flex;
	flex-direction: column;
	width: 35%;
	margin: 10px;
	text-align: justify;
}

HTML

<section>
				<div id="blocdroit">
					<div id="formation" class="element"><h2>FORMATION</h2>

						<p><span class="date">2017</span> Master 2 DNSEP Design EESAB (Brest - 29)</p>
						<p><span class="date">2016</span> Master 1 DNSEP Design EESAB (Brest - 29)</p>
						<p><span class="date">2015</span> Licence 3 Arts Appliqués - Mention design Université de Nîmes (30) - Année ERASMUS - Design Industriel - Liège (Belgique)</p>
						<p><span class="date">2014</span> Licence 2 Arts Appliqués - Mention design Université de Nîmes - (Nîmes - 30)</p>
						<p><span class="date">2013</span> Licence 1 Arts Appliqués - Mention design Université de Nîmes - (Nîmes - 30)</p>
						<p><span class="date">2011</span> 1ère année DUT Informatique UPJV (Amiens - 80)</p>
						<p><span class="date">2010</span> Bac scientifique OPTION Physique-Chimie Lycée Pierre de La Ramée - (St-Quentin - 02)</p>
					</div>
					
					<div id="experience" class="element"><h2>EXPERIENCE</h2>

						<p><span class="date">Mai - Juillet 2016</span> Stage Design pour l’événement Brest 2016 Conception de mobiliers à partir de déchets industriels et aménagement du stand “Zéro déchets” de la ville de Brest destiné à accueillir le public afin de le sensibiliser au recyclage via divers ateliers.</p>
						<p><span class="date">Juillet - Août 2013 - 2016</span> Equipier polyvalent McDonalds</p>
						<p><span class="date">Septembre 2012 - Juin 2013</span> Equipier polyvalent McDonalds</p>
					</div>
						
					<div id="competences" class="element"><h2>COMPETENCES</h2>
						<ul>
							<li>Photoshop</li>
							<li>InDesign</li>
							<li>Illustrator</li>
						</ul>
					</div>
				</div>

Bonsoir,

1 supprimer les ID et passer en classes
2 à quoi servent ces display:flex ? à rien, les éléments vont s'empiler normalement dans leurs conteneur parent sans flex
3 en revanche, il faut un conteneur parent pour les 4 éléments principaux (en l'occurrence la <section>), conteneur qui, lui, sera en display:flex
4 rien, c'est tout

Donc beaucoup plus simple !

-
Edité par ChrisLebure 10 octobre 2017 à 22:28:21

ChrisLebure a écrit:

Bonsoir,

1 supprimer les ID et passer en classes
2 à quoi servent ces display:flex ? à rien, les éléments vont s'empiler normalement dans leurs conteneur parent sans flex
3 en revanche, il faut un conteneur parent pour les 4 éléments principaux (en l'occurrence la <section>), conteneur qui, lui, sera en display:flex
4 rien, c'est tout

Donc beaucoup plus simple !

-
Edité par ChrisLebure il y a environ 10 heures

Merci de ta réponse !

1. Je n'ai pas pu le faire car je fais une réorganisation des éléments via ".element:nth-child(1) ...". Si je passe en class, ça fait deux class dans la balise et la réorganisation ne fonctionne plus. J'ai donc laissé ces 3 balises avec l'attribut ID.

2. En effet ces display:flex; là ne servaient à rien merci !

3. Si j'ai bien compris tu voulais que j'englobe également la partie à gauche qui se trouve sur un liseré avec la photo et les infos de contact. Je l'ai placé dans la balise <header>... j'ai eu tort ? Du coup j'ai tenté une <div class="#"> qui englobe et <header> et la <section> mais rien n'a changé :/ 

Bonjour,

> Si je passe en class, ça fait deux class dans la balise et la réorganisation ne fonctionne plus.

Il ne faut qu'un seul attribut "class", mais sa valeur peut tout à fait contenir plusieurs éléments. Exemple :

<div class="element plop"></div>
<div class="element pouet"></div>

Lamecarlate a écrit:

Bonjour,

> Si je passe en class, ça fait deux class dans la balise et la réorganisation ne fonctionne plus.

Il ne faut qu'un seul attribut "class", mais sa valeur peut tout à fait contenir plusieurs éléments. Exemple :

<div class="element plop"></div>
<div class="element pouet"></div>

TOP ! Merci.

Je crois que je me suis fait mal comprendre il faut passer la section en display:flex, les 4 éléments doivent être dans une flex-box, c'est-à-dire un conteneur parent en display:flex :

<section class="mon_conteneur">
...
</section>

.mon_conteneur {
 display:flex;
 ...
}