I still can't remember wich property apply to which axis so let's build a cheat-set! Again, many thanks to FreeCodeCamp courses for the detailed explanations.
For starters, in our HTML document we'll need a container as well as children boxes. For instance:
<body>
<main>
<section>
<h2>section 1</h2>
<p>Lorem ipsum dolor sit amet.</p>
</section>
<section>
<h2>section 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>
<section>
<h2>section 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>
</main>
</body>
Here the container is main and it's children boxes are section. Let's tell the browser how to position elements on the page:
main {
display: flex;
justify-content: space-evenly;
}
Explanations & other possibilites
First thing first, we have to declare we're using the flex model. Use display property value flex for that.
Main axis
The main axis is declared with flex-direction property:
The justify-content property determines how the items inside a flex container are positioned along the main axis. It can take this values (find all on mdn web docs):
The flex-wrap property determines how the flex items behave when the flex container is too small. Otherwise, items will shrink if needed. It can take this values:
The gap CSS property sets the gaps (gutters) between rows and columns. It is a shorthand for row-gap and column-gap. It can take one or two lenght value(s) (such as 1em for instance) or percentage value(s).
Cross axis
The align-items property controls alignment of all items on the cross axis. It can take this values:
Here's a list of screen sizes by device:
(Thanks FreeCodeCamp!)
In the CSS document, place the @media rule after the first no-rule is applied. For instance:
main {
width: 55%;
max-width: 400px;
}
@media screen and (max-width: 500px) {
main {
width: 85%;
}
}
J'ai enfin compris que certains éléments HTML avaient une marge et/ou padding par défaut appliquée par les navigateurs, par exemple <body> a une marge par défaut de 8px sur Firefox. Résultat : si vous coloriez votre page en jaune :
body {
background-color: gold;
}
et votre tête de page en bleu (en fournissant une hauteur pour que le bloc soit visible) :
header {
background-color: aqua;
height: 200px;
}
pour la page suivante :
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<header>
</header>
<main>
</main>
</body>
</html>
eh bien vous verrez apparaitre ce qui semble être une bordure non sollicitée de votre <header> ! D'après ce que j'ai compris, il s'agit plutôt de l'espace que se ménage le <body> par rapport à ses éléments enfants donc c'est plutôt sur <body> qu'il faut agir. Pour le débarrasser de ses marges cachées, proposition de solution :
body {
background-color: gold;
margin: 0;
}
(Voir sinon une autre proposition dans un article plus récent.) C'est le même principe pour tous les éléments qui ont une marge par défaut paramétrée par le navigateur, <h1> par exemple ou encore, <ul>.