Bonjour,

cela fait 1 journée que j'essaie de faire ma page d'afichage de profil mais je n'arrive pas à structurer mon flexbox pour ça. Je voudrais faire ce genre de présentation:

pourriez-vous m'aider à faire ma structure en flexbox svp?

Merci de votre aide

tu as déjà fait quelque chose ?

Sinon tu commence par une flex box horizontal avec trois colonnes, puis pour chaque colonne tu redécoupes.

Hello les gens. Voilà j'ai bossé le mon post lol

Pourriez-vous me donner votre avis sur cette façon et l'aperçus? avez-vous des idées pour améliorer physiquement la chose ou encore améliorer le code si des choses ont été fait d'une façon pas très logique.

Code CSS

#container_profil 
{
  width: 800px;
  margin: 0px auto;
  padding: 20px;
  display: flex;
  border: 2px solid #459edb;
}

.container_left_profil 
{
  width: 150px;
}

.avatar_view_profil 
{
  width: 150px;
  height: 150px;
  border-left: 1px solid #a1a7b3;
  border-top: 1px solid #a1a7b3;
  border-right: 1px solid #a1a7b3;
}

.pseudo_profil 
{
  width: 140px;
  padding: 5px;
  text-align: center;
  color: #a1a7b3;
  background-color: #eff0f2;
  border-left: 1px solid #a1a7b3;
  border-right: 1px solid #a1a7b3;
  border-bottom: 1px solid #a1a7b3;
}

.gestion_profil
{
  width: 150px;
  margin-top: 10px;
  text-align: center;
}

.gestion_profil button
{
  width: 150px;
  padding: 5px;
  margin-bottom: 5px;
  background-color: #eff0f2;
  background: -webkit-gradient(linear, 0 0, 0 bottom, from(#eee), to(#e2e2e2));
  background: -moz-linear-gradient(#eee, #e2e2e2);
  background: linear-gradient(#eee, #e2e2e2);
  color: #636363;
  border: 1px solid #a1a7b3;
}

.gestion_profil button:hover
{
  background: #e4e4e4;
  background: -webkit-gradient(linear, 0 0, 0 bottom, from(#e4e4e4), to(#ededed));
  background: -moz-linear-gradient(#e4e4e4, #ededed);
  background: linear-gradient(#e4e4e4, #ededed);
  border: solid 1px #c2c2c2;
  box-shadow: inset 0 0 0 1px #efefef;  
}

.container_right_profil
{
  width: 600px;
  margin-left: 20px;
  padding: 10px;
}

.container_right_profil h2 
{
  color: #c2c2c2;
  border-bottom: 1px solid #a1a7b3;
}

.container_right_profil li
{
  list-style: none;  
}

.info_perso_view 
{
  width: 600px;
  display: flex;
}

.view_profil_cat
{
  width: 200px;
  padding: 10px;
  text-transform: uppercase;
  color: #459edb;
}

.view_profil_complet 
{
  padding: 10px;
}

Code HTML

<div id="container_profil">
  <div class="container_left_profil">
    <div class="avatar_view_profil">
      <img src="//s3-eu-west-1.amazonaws.com/sdz-upload/prod/users/avatars/avatar376.png" alt="Mon avatar" />
    </div>
    <div class="pseudo_profil">
      <span>Fiireman</span>
    </div>
    <div class="gestion_profil">
      <a href="#"><button>Paramètres</button></a>
      <a href="#"><button>Déconnexion</button></a>
    </div>
  </div>
  <div class="container_right_profil">
    <h2>Informations personnelles</h2>
    <div class="info_perso_view">
      <div class="view_profil_cat">
        <ul>
          <li>Nom d'utilisateur</li>
          <li>Nom</li>
          <li>Prénom</li>
        </ul>
      </div>
      <div class="view_profil_complet">
        <ul>
          <li>Fiireman</li>
          <li>Djoghlal</li>
          <li>Mickaël</li>
        </ul>
      </div>
    </div>
    <h2>Informations divers</h2>
    <div class="info_perso_view">
      <div class="view_profil_cat">
        <ul>
          <li>localisation</li>
          <li>date de naissance</li>
          <li>profession</li>
        </ul>
      </div>
      <div class="view_profil_complet">
        <ul>
          <li>Bordeaux (33)</li>
          <li>24 mai 1991</li>
          <li>Dessinateur projeteur éléctricité</li>
        </ul>
      </div>
    </div>
  </div>
</div>

Merciiii