Flex

A Complete Guide to Flexbox

1 – Placer le dernier item à la fin du conteneur

https://stackoverflow.com/questions/33924655/position-last-flex-item-at-the-end-of-container

.last-item {
  margin-top: auto;
}

ou, par exemple, avec last-child :

p:last-of-type {
  margin-top: auto;
}

Fonctionne également horizontalement avec margin-left et margin-right

2 – Afficher des colonnes de hauteur égale

How to Set Equal Column Heights using Flexbox

3 – Aligner verticalement du contenu

How to Vertically Align Content in Divi

4a – Centrer horizontalement

Dans la Colonne, écrire :

display:flex;
justify-content:center;

Src. https://www.design-fluide.com/02-08-2018/centrer-horizontalement-flexbox/

4b – Centrer verticalement

Dans la Colonne (ou Ligne s’il n’y a qu’un seule colonne) :

1. Dans « Dimensionnement » : « Harmoniser les hauteurs de colonnes » (même s’il n’y en a qu’une)
ou :
Ecrire dans le CSS : display:flex (ce qui revient au même)

2. Puis dans le CSS de la Colonne (ou Ligne) :
margin:auto;

How to Vertically Align Content in Divi

4c – Placer un module au bottom

1. Dans la colonne qui contient le module :

display: flex;
flex-direction: column;
( justify-content: flex-start; ) (facultatif)

Ensuite, appliquer le CSS au module considéré :

margin-top:auto;
(margin-bottom:0;) (facultatif)

2. Dans Div, s’il s’agit d’un bouton, il faut appliquer une class ‘bottom’ (par exemple) au module puis écrire dans un module code tout proche :

<script>
  jQuery("div.et_pb_button_module_wrapper:has(.bottom)").css("margin-top", "auto");
</script>

Src. https://stackoverflow.com/questions/2000582/css-selector-for-foo-that-contains-bar

5. Grid

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows