Bonjour,
Ci-dessous deux manières de faire.
Note dans l'exemple avec les inline-blocks la présence des <!-- ---> dans le HTML qui permettent de supprimer des espaces entre les sections.
L'exemple en flex ne marche que sur les navigateurs plus ou moins récents (pour certains plus anciens, ça peut marcher aussi mais il faut ajouter des préfixes genre -webkit-, ...).
Dans l'exemple en flex, on peut se permettre d'être peu précis sur la valeur de max-width (flex fait l'ajustement). Dans l'exemple avec les inline-blocks, par contre, il faut que width soit au plus près du tiers de la largeur du conteneur par valeur inférieure (ouf).
EDIT : il fallait comprendre "min-width" et non pas "max-width" bien sûr. Mea culpa !
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,user-scalable=yes">
<style>
div {margin:1em;}
.container1
{
display:flex;
flex-wrap:wrap;
}
.container1 section
{
flex:1;
min-width:30%;
}
.container2 section
{
display:inline-block;
width:33.33%;
}
div section:nth-of-type(1) {background:#fc9;}
div section:nth-of-type(2) {background:#f9c;}
div section:nth-of-type(3) {background:#cf9;}
div section:nth-of-type(4) {background:#c9f;}
div section:nth-of-type(5) {background:#9fc;}
div section:nth-of-type(6) {background:#9cf;}
</style>
</head>
<body>
<h1>Flex test</h1>
<div class="container1">
<section>1</section>
<section>2</section>
<section>3</section>
<section>4</section>
<section>5</section>
<section>6</section>
</div>
<div class="container2">
<section>1</section><!--
--><section>2</section><!--
--><section>3</section><!--
--><section>4</section><!--
--><section>5</section><!--
--><section>6</section>
</div>
</body>
</html>
Amicalement,
Modifié par parsimonhi (18 Jan 2016 - 14:19)
