WebForge Sàrl

: aligner les boutons vers le bas

aligner les boutons vers le bas

Souvent on a des "articles" dans une mise en page de 2 a 4 colonnes. Ces articles ont des descriptions (titre, photo, textes) et terminent par un bouton "en savoir plus" ou "commander", etc... Mais comme les descriptions sont de tailles variables, les boutons ne seront pas alignés verticalement (ils sont tous stackés vers le haut dans leur colonne respective

La bonne solution:

https://wpbeaches.com/aligning-last-item-bottom-container-flexbox/

Deprecated:

Une solution, pour les aligner verticalement est la suivante:

1. on modifie le conteneur de la colonne. on le met en flex, flex-column. A priori ça ne change rien (les éléments contenu seront stacké les uns après les autres, vers le haut. Mais ça permet de choisir un flex-grow pour le dernier élément.

2. le dernier élément à un gros flex-grow. donc il prendra toute la place qui reste. On met ce dernier élément lui aussi en flex-column, mais en flex-end. ainsi il se stackera son contenu vers le bas.

Attention: dans ce cas ça fonctionne car le dernier élément est un bloc_button, qui contient un <a>. Donc c'est le <a> qui est stacké en bas dans le bloc_button. Si le dernier élément n'est pas un container, il faut le mettre dans une mise en page et corriger les sélécteurs adéquatement

<css selector='.bloc_layout.Ln_2D > .columns > .container' display='flex' flex-direction='column'/>
<css selector='.bloc_layout.Ln_2D >
.columns > .container > .bloc_button:last-child' flex-grow='1' display='flex' flex-direction='column' justify-content='flex-end'/>
Editer