Bonjour

Mon display: flex ne marche pas..

Je m'explique:

je voudrais que ma "Leftbox" et ma "Rightbox" soit collé l'une à coté de l'autre(en 50% chacune),  et que ma "centerbox" soit en dessous (en 100%). 

Du coup j'utilise la propriété Flexbox qui me parait top pour cette situation, mais ça ne marche pas..

Si quelqu'un à une solution ? Merci

Voici mon code:

<section id="content">

	<ol>
		<article class="leftbox">
			<h2>Formation</h2>

				<ul>
					<li><strong class="puce"> 2018: </strong> Apprenez à créer votre site web avec HTML5 et CSS3 - <a href="https://openclassrooms.com">OpenClassRoom</a> </li> 
					<li><strong class="puce"> 2013: </strong> Baccalauréat Professionnel Commerce - xxxxxxxx </li>
					
				</ul>
		</article>


		<article class="rightbox">
			<h2>Expériences</h2>

				<ul>
					<li><strong class="puce"> 2017-2019: xxxxxxxxxxx</strong></li>
												Gestion des stocks, Respect des normes et hygiène, preparation de commandes, formation
					<li><strong class="puce"> 2015-2017: xxxxxxxxxxxx </strong></li> 
												Gestion des stocks, Respect des normes et hygiène, preparation de commandes, formation						
					<li><strong class="puce"> 2010-2013: xxxxxxxxxxx </strong></li>
												Mise en rayon, Facing, Gestion des Stocks, Accueil et informations au clients
					
					
				</ul>	
		</article>


		<article class="centerbox">
			<h2>Compétences</h2>

				<ul>
				<table>
					<tr>
						<td><li>HTML/CSS 
							<p><progress id="avancement1" value="30" max="100"></progress></p></li></td>
						<td><li>Photoshop
							<p><progress id="avancement2" value="50" max="100"></progress></p></li></td>
					</tr>
					<tr>
						<td><li>Word
							<p><progress id="avancement3" value="55" max="100"></progress></p></li></td>
						<td><li>Anglais 
							<p><progress id="avancement4" value="45" max="100"></progress></p></li></td>
					</tr>
				</table>
				</ul>
			</article>
	</ol>

</section>

#content
{	 display: flex;
	
  
}

.leftbox
{
	background-color: blue;

	
}

.rightbox
{
	background-color: orange;
	
}

.centerbox
{
	background-color: green;
	
}

Bonsoir,

Si j'ai bien compris tu veux arriver a ce résultat :

Salut,

Enlève ta balise <ol>, qui ne te sert à rien ici et ne devrait de toute façon contenir que des balises <li>.

Ton display: flex; marche très bien, il est juste appliqué sur le <ol> qui se trouve là, au lieu d'être appliqué sur tes éléments.