28172 sujets

CSS et mise en forme, CSS3

Alignement flexbox

Bonjour,

J'ai un "flex-container" (class="f-c") avec deux "flex-items" (class="f-i-1" et class="f-i-2"). Je souhaiterais que le premier "flex-item" soit en haut de la page et que le second soit au milieu de la page.
Comment pourrai-je faire cela avec flexbox ?
Code actuel : https://codepen.io/Titouan79/pen/OedVMN

Merci d'avance pour vos réponses Smiley smile
Modifié par Titouan79 (10 Jul 2019 - 11:31)
Tu peux faire ça (modif de ton codepen): 

body {
  margin: 0;
  padding: 0;
}

.f-c-1 {
  display: flex;
  flex-direction: column;
  width: 500px;
  height: 500px;
}

.f-i-1 {
  width: 100px;
  height: 100px;
  background-color: red;
}

.f-i-2 {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin-top: auto;
  margin-bottom: auto;
}

Par contre, ici le 2èeme élément n'est pas centré sur la totalité du conteneur mais sur l'espace restant (conteneur - div1).

Une autre piste serait de laisser l'axe principal horizontal, un conteneur aussi large que les divs pour "obliger" un passage à la ligne, et après jouer avec align-items et align-self...

Et puis il y a certainement d'autres solutions mais là tout de suite je vois pas! Smiley smile
Administrateur
Mathieu8337 a écrit :

Par contre, ici le 2èeme élément n'est pas centré sur la totalité du conteneur mais sur l'espace restant (conteneur - div1).

Hello,

C'est effectivement un cas assez tordu. Selon moi il n'y a guère de choix possible : si le 2e item doit être centré parfaitement dans son parent quelque soit le nombre de ses frères, il doit être retiré du flux.

J'ai testé en le positionnant en absolute et cela semble faire le job :
position: absolute; 
  top: 50%; 
  transform: translateY(-50%);
Administrateur
Ah ben en fait j'ai trouvé une solution sans avoir besoin de sortir du flux, grâce à Grid Layout.

Le but est de découper en 3 rangées verticales de tailles respectives : 1fr auto 1fr
- 1fr correspond à une fraction de l'espace restant (1ère et 3e rangée)
- auto correspond à la dimension du contenu de la 2è rangée
- ensuite on aligne tous les items en haut de leur rangée via align-items: start;

Démo : https://codepen.io/raphaelgoetter/pen/ydZXor

<div class="container">
  <div class="item item-1">
    
  </div>
  <div class="item item-2">
    
  </div>
</div>


.container {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  justify-items: center;
  align-items: start;
}
.item {
  width: 6rem;
  height: 6rem;
}

.item-1 {
  background-color: pink;
}

.item-2 {
  background-color: powderblue;
}


C'est un cas de figure que l'on rencontre parfois et on s'y casse les dents. Je suis ravi que Grid Layout puisse venir à notre secours encore une fois Smiley ravi
Modifié par Raphael (10 Jul 2019 - 17:01)
Bonjour Titouan79,


Après relecture c'est pas ce que tu veux
Modifié par aliasdmc (10 Jul 2019 - 20:01)
Sujet clos
Aller à