Flexbox : centrer horizontalement et verticalement

Je pense que vous voulez quelque chose comme ce qui suit.

html, body {
    height: 100%;
}
body {
    margin: 0;
}
.flex-container {
    height: 100%;
    padding: 0;
    margin: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}
.row {
    width: auto;
    border: 1px solid blue;
}
.flex-item {
    background-color: tomato;
    padding: 5px;
    width: 20px;
    height: 20px;
    margin: 10px;
    line-height: 20px;
    color: white;
    font-weight: bold;
    font-size: 2em;
    text-align: center;
}

<div class="flex-container">
    <div class="row"> 
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
    </div>
</div>

Voir la démo à l'adresse : http://jsfiddle.net/audetwebdesign/tFscL/

Vos éléments .flex-item doivent être de niveau bloc (div au lieu de span) si vous voulez que la hauteur et le remplissage haut/bas fonctionnent correctement.

De plus, dans le fichier .row, réglez la largeur sur auto au lieu de 100%.

Vos propriétés .flex-container sont correctes.

Si vous voulez que le .row soit centré verticalement dans le port d'affichage, attribuez une hauteur de 100 % à html et body, et mettez également à zéro les marges de body.

Notez que .flex-container a besoin d'une hauteur pour que l'alignement vertical soit effectif, sinon le conteneur calcule la hauteur minimale nécessaire pour contenir le contenu, qui est inférieure à la hauteur du port d'affichage dans cet exemple.

Note de bas de page: Les propriétés flex-flow, flex-direction, flex-wrap auraient pu rendre cette conception plus facile à mettre en œuvre. Je pense que le conteneur .row n'est pas nécessaire, sauf si vous voulez ajouter du style autour des éléments (image de fond, bordures, etc.).

Une ressource utile est : http://demo.agektmr.com/flexbox/

Comment centrer les éléments verticalement et horizontalement dans Flexbox ?

Vous trouverez ci-dessous deux solutions générales de centrage.

L'une pour les éléments flex alignés verticalement (flex-direction : column) et l'autre pour les éléments flex alignés horizontalement (flex-direction : row).

Dans les deux cas, la hauteur des divs centrés peut être variable, indéfinie, inconnue ou autre. La hauteur des divs centrés n&#8217a pas d&#8217importance.

**Voici le code HTML pour les deux cas.

<div id="container">

    <div class="box" id="bluebox">
        <p>DIV #1</p>
    </div>

    <div class="box" id="redbox">
        <p>DIV #2</p>
    </div>

</div>

CSS (à l'exclusion des styles décoratifs)

Lorsque les éléments flex sont empilés verticalement:

#container {
    display: flex;           /* establish flex container */
    flex-direction: column;  /* make main axis vertical */
    justify-content: center; /* center items vertically, in this case */
    align-items: center;     /* center items horizontally, in this case */
    height: 300px;
}

.box {
    width: 300px;
    margin: 5px;
    text-align: center;     /* will center text in <p>, which is not a flex item */
}

[!entrer la description de l'image ici][2]][2]

[DEMO](http://jsfiddle.net/8o29y7pd/)

Lorsque les éléments flex sont empilés horizontalement:

Ajustez la règle flex-direction du code ci-dessus.

#container {
    display: flex;
    flex-direction: row;     /* make main axis horizontal (default setting) */
    justify-content: center; /* center items horizontally, in this case */
    align-items: center;     /* center items vertically, in this case */
    height: 300px;
}

[!entrer la description de l'image ici][3]][3]

[DEMO](http://jsfiddle.net/8o29y7pd/3/)

Centrer le contenu des éléments flex

La portée d'un [contexte de mise en forme flex] (https://www.w3.org/TR/css-flexbox-1/#flex-containers) est limitée à une relation parent-enfant. Les descendants d'un conteneur flex au-delà des enfants ne participent pas à la mise en forme flex et ignorent les propriétés flex. Essentiellement, les propriétés flex ne sont pas héritables au-delà des enfants.

Par conséquent, vous devrez toujours appliquer display : flex ou display : inline-flex à un élément parent afin d'appliquer les propriétés flex à l'enfant.

Pour centrer verticalement et/ou horizontalement un texte ou un autre contenu contenu dans un élément flex, faites de cet élément un conteneur flex (imbriqué) et répétez les règles de centrage.

.box {
    display: flex;
    justify-content: center;
    align-items: center;        /* for single line flex container */
    align-content: center;      /* for multi-line flex container */
}

Plus de détails ici : https://stackoverflow.com/q/25311541/3597276

Vous pouvez également appliquer margin : auto à l'élément de contenu de l'élément flexible.

p { margin: auto; }

Pour en savoir plus sur les marges auto de Flex, cliquez ici : [Méthodes d'alignement des éléments Flex] (https://stackoverflow.com/a/33856609/3597276) (voir encadré 56).

Centrage de plusieurs lignes d'éléments flex

/h3>

Lorsqu'un conteneur flex comporte plusieurs lignes (en raison de l'habillage), la propriété align-content est nécessaire pour l'alignement sur l'axe transversal.

Extrait de la spécification:

[8.4. Emballage des lignes flexibles : la propriété align-content. propriété] (https://www.w3.org/TR/css-flexbox-1/#align-content-property)

La propriété align-content aligne les lignes d'un conteneur flexible à l'intérieur du conteneur flexible lorsque l'espace transversal est trop important. conteneur flex lorsqu'il y a de l'espace supplémentaire dans l'axe transversal. de la manière dont justify-content aligne les éléments individuels dans l'axe principal. Notez que cette propriété n'a aucun effet sur un conteneur flexible à ligne unique.

Plus de détails ici : https://stackoverflow.com/q/42613359/3597276

---

Support des navigateurs

Flexbox est pris en charge par tous les principaux navigateurs, [sauf IE < 10] (http://caniuse.com/#search=flex). Certaines versions récentes de navigateurs, comme Safari 8 et IE10, nécessitent des [préfixes de fournisseur] (https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix). Pour un moyen rapide d'ajouter des préfixes, utilisez Autoprefixer. Plus de détails dans cette réponse.

Solution de centrage pour les anciens navigateurs

Pour une autre solution de centrage utilisant les propriétés de table et de positionnement CSS, voir cette réponse : https://stackoverflow.com/a/31977476/3597276.

[1] : http://i.stack.imgur.com/zxRPw.png [2] : http://i.stack.imgur.com/9Jbjt.png [3] : http://i.stack.imgur.com/ccTOU.png

N'oubliez pas d'utiliser les attributs spécifiques des navigateurs importants :

align-items : center ; -->

-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

justify-content : center ; -->

-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;

Vous pouvez lire ces deux liens pour mieux comprendre flex : http://css-tricks.com/almanac/properties/j/justify-content/ et http://ptb2.me/flexbox/

Bonne chance.