Flexbox, colonne et alignement

Bonjour.

Ajoutez 'margin-top : auto' à la classe '.wp-booking', cela le cale vers le bas. Cela va déplacer le pavé au-dessus vers le haut, mais vous pouvez modifier les margin ou les paddings...

On dirait que vous avez voulu utiliser un pré-processeur mais sur le Codepen, ça n'a pas fonctionné...

Merci pour votre aide.

Cependant je ne veux pas que le titre soit en haut, il faudrait qu'il soit centré verticalement et horizontalement, et que le wp-booking lui reste en bas.

En gros, on se retrouverait avec un espace de 33% vide en haut, un espace de 33% de titre et de sous-titre au milieu de la "carte", puis 33% de footer, grosso-modo. Même s'il n'y a pas de bouton en bas, ça ne doit pas créer de décalage verticale avec le titre. Tous les titres doivent être alignés.



J'espère que c'est un peu plus clair maintenant...
Modifié par lorraineS (27 Apr 2017 - 13:24)

Bonjour,

Le problème vient du fait que le contenu du 3eme bloc (donc le bouton et le reste) est trop gros. Le contenu fait donc plus de 33%.
Sans spécifier de paramètre flex pour les enfants les tailles se répartissent équitablement (donc 3 fois 33%) par défaut SAUF si un contenu est trop grand.

Je pense que tu as loupé une étape de maitrise du flex ^^
Voila un récap aussi simple qu'efficace : https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Un peu à l'arrache et pour te montrer tu peux ajouter :

.wp-container > div {
  flex: 0 0 33%;
  overflow: hidden;
}

Les 3 enfants seront bloqués (flex: 0 0 33%; les empêchent de grandir ou rétrécir par eux meme et les bloque à 33%) ce qui dépasse sera masqué (overflow:hidden;).
Par contre c'est dommage d'utiliser le flex pour au final avoir un comportement de 3 div à hauteur fixe (ou de tableau).

Hello.

Le fait d'ajouter un flex-basis ne règle pas le problème. Le fait d'avoir du 33% de hauteur causera un problème sur l'alignement vertical du footer étant donné que sa hauteur peut varier en fonction la présence (ou non) du bouton.



Sinon j'ai déjà lu ton article (et pas qu'une fois ). Mais je sais bien qu'il y a une chose bête que je ne comprends pas...
Modifié par lorraineS (27 Apr 2017 - 15:54)

lorraineS a écrit :
Le fait d'ajouter un flex-basis ne règle pas le problème.

Non c'est sur. J'ai également ajouté un flex-growth et flew-shrink et j'ai bien dit que c'était pour illustrer mon propos pas pour régler le soucis

lorraineS a écrit :
Le fait d'avoir du 33% de hauteur causera un problème sur l'alignement vertical du footer étant donné que sa hauteur peut varier en fonction la présence (ou non) du bouton.

Oui le bloc fait plus de 33% c'est bien le soucis que je cherchais à te montrer mais tu avais dit :

lorraineS a écrit :
En gros, on se retrouverait avec un espace de 33% vide en haut, un espace de 33% de titre et de sous-titre au milieu de la "carte", puis 33% de footer, grosso-modo. Même s'il n'y a pas de bouton en bas, ça ne doit pas créer de décalage verticale avec le titre. Tous les titres doivent être alignés.

Mais au final tu ne veut pas 33%

Avec ces nouveau élément je te propose donc de virer le premier block vide de ton html et de rajouter un padding-top de 33% (ou autre que tu veux) sur le title : https://codepen.io/anon/pen/mmRzvy
Modifié par _laurent (27 Apr 2017 - 16:24)

Bonjour,

tu peut retirer l’élément vide et générer un pseudo élément https://codepen.io/gc-nomade/pen/YVNbjb ou créer un pading-top https://codepen.io/gc-nomade/pen/bWgyQw Dans les 2 cas tu indique la valeur que tu souhaite (450/3=150)

Le choix d'un alignement justifier pourrait etre validé avec 2 éléments et un padding-top sur le titre. Un margin-top:auto; suffit aussi a repousser le second élément tout en bas (1er pen).
Modifié par gcyrillus (27 Apr 2017 - 20:45)