/ Code Css -ms-flex-align | Résultat du code Css -ms-flex-align | Copie d'écran / J'ai vu une erreur dans cette page

Exemple de code de la propriété CSS -ms-flex-align.

<style>
.exemple-flex-ms-flex-align-start{  : start; }
.exemple-flex-ms-flex-align-end{  : end; }
.exemple-flex-ms-flex-align-center{  : center; }
.exemple-flex-ms-flex-align-baseline{  : baseline; }
.exemple-flex-ms-flex-align-stretch{  : stretch; }

.exemple-flex-container-col,
.exemple-flex-container-row {  : -ms-flexbox;  : row; width:500px;  : wrap; border-color:#666; } 
.exemple-flex-container-col {  : column; border-color:#2a712a}
.exemple-flex-container-row p{ margin-top:5px }
.exemple {  border-width:1px; border-style:solid; margin-bottom:10px; padding:5px; }
.exemple-flex-item { border:1px dotted #666; width:150px; display:block; } 
</style>
<div class="exemple exemple-flex-container-row">
    <div class="exemple-flex-item">1 ) <b>-ms-flex-align valeur par défaut</b></div>
    <p class="exemple-flex-item">2 ) <b>-ms-flex-align valeur par défaut</b> Lorem ipsum dolor sit amet.</p>
    <span class="exemple-flex-item">3 ) <b>-ms-flex-align valeur par défaut</b> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</span>
    <span class="exemple-flex-item">4 ) <b>-ms-flex-align valeur par défaut</b> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</span>
    <div class="exemple-flex-item">5 ) <b>-ms-flex-align valeur par défaut</b></div>
    <p class="exemple-flex-item">6 ) <b>-ms-flex-align valeur par défaut</b> Lorem ipsum dolor sit amet.</p>
</div>

<div class="exemple exemple-flex-container-row exemple-flex-ms-flex-align-start">
    <div class="exemple-flex-item">1 ) <b>-ms-flex-align : start; </b></div>
    <p class="exemple-flex-item">2 ) <b>-ms-flex-align : start; </b> Lorem ipsum dolor sit amet.</p>
    <span class="exemple-flex-item">3 ) <b>-ms-flex-align : start; </b> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</span>
    <span class="exemple-flex-item">4 ) <b>-ms-flex-align : start; </b> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</span>
    <div class="exemple-flex-item">5 ) <b>-ms-flex-align : start; </b></div>
    <p class="exemple-flex-item">6 ) <b>-ms-flex-align : start; </b> Lorem ipsum dolor sit amet.</p>
</div>

<div class="exemple exemple-flex-container-row exemple-flex-ms-flex-align-end">
    <div class="exemple-flex-item">1 ) <b>-ms-flex-align : end; </b></div>
    <p class="exemple-flex-item">2 ) <b>-ms-flex-align : end; </b> Lorem ipsum dolor sit amet.</p>
    <span class="exemple-flex-item">3 ) <b>-ms-flex-align : end; </b> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</span>
    <span class="exemple-flex-item">4 ) <b>-ms-flex-align : end; </b> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</span>
    <div class="exemple-flex-item">5 ) <b>-ms-flex-align : end; </b></div>
    <p class="exemple-flex-item">6 ) <b>-ms-flex-align : end; </b> Lorem ipsum dolor sit amet.</p>
</div>

<div class="exemple exemple-flex-container-row exemple-flex-ms-flex-align-center">
    <div class="exemple-flex-item">1 ) <b>-ms-flex-align : center; </b></div>
    <p class="exemple-flex-item">2 ) <b>-ms-flex-align : center; </b> Lorem ipsum dolor sit amet.</p>
    <span class="exemple-flex-item">3 ) <b>-ms-flex-align : center; </b> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</span>
    <span class="exemple-flex-item">4 ) <b>-ms-flex-align : center; </b> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</span>
    <div class="exemple-flex-item">5 ) <b>-ms-flex-align : center; </b></div>
    <p class="exemple-flex-item">6 ) <b>-ms-flex-align : center; </b> Lorem ipsum dolor sit amet.</p>
</div>

<div class="exemple exemple-flex-container-row exemple-flex-ms-flex-align-baseline">
    <div class="exemple-flex-item" style="font-size:26px; ">1 ) <b>-ms-flex-align : baseline; </b></div>
    <p class="exemple-flex-item">2 ) <b>-ms-flex-align : baseline; </b> Lorem ipsum dolor sit amet.</p>
    <span class="exemple-flex-item" style="font-size:11px; ">3 ) <b>-ms-flex-align : baseline; </b> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</span>
    <span class="exemple-flex-item" style="font-size:11px; ">4 ) <b>-ms-flex-align : baseline; </b> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</span>
    <div class="exemple-flex-item" style="font-size:24px; ">5 ) <b>-ms-flex-align : baseline; </b></div>
    <p class="exemple-flex-item">6 ) <b>-ms-flex-align : baseline; </b> Lorem ipsum dolor sit amet.</p>
</div>

<div class="exemple exemple-flex-container-row exemple-flex-ms-flex-align-stretch">
    <div class="exemple-flex-item">1 ) <b>-ms-flex-align : stretch; </b></div>
    <p class="exemple-flex-item">2 ) <b>-ms-flex-align : stretch; </b> Lorem ipsum dolor sit amet.</p>
    <span class="exemple-flex-item">3 ) <b>-ms-flex-align : stretch; </b> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</span>
    <span class="exemple-flex-item">4 ) <b>-ms-flex-align : stretch; </b> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</span>
    <div class="exemple-flex-item">5 ) <b>-ms-flex-align : stretch; </b></div>
    <p class="exemple-flex-item">6 ) <b>-ms-flex-align : stretch; </b> Lorem ipsum dolor sit amet.</p>
</div>


<div class="exemple exemple-flex-container-col">
    <div class="exemple-flex-item">1 ) <b>-ms-flex-align par défaut; </b></div>
    <p class="exemple-flex-item">2 ) <b>-ms-flex-align par défaut; </b> Lorem ipsum dolor sit amet.</p>
</div>

<div class="exemple exemple-flex-container-col exemple-flex-ms-flex-align-start">
    <div class="exemple-flex-item">1 ) <b>-ms-flex-align : start; </b></div>
    <p class="exemple-flex-item">2 ) <b>-ms-flex-align : start; </b> Lorem ipsum dolor sit amet.</p>
</div>

<div class="exemple exemple-flex-container-col exemple-flex-ms-flex-align-end">
    <div class="exemple-flex-item">1 ) <b>-ms-flex-align : end; </b></div>
    <p class="exemple-flex-item">2 ) <b>-ms-flex-align : end; </b> Lorem ipsum dolor sit amet.</p>
</div>

<div class="exemple exemple-flex-container-col exemple-flex-ms-flex-align-center">
    <div class="exemple-flex-item">1 ) <b>-ms-flex-align : center; </b></div>
    <p class="exemple-flex-item">2 ) <b>-ms-flex-align : center; </b> Lorem ipsum dolor sit amet.</p>
</div>

<div class="exemple exemple-flex-container-col exemple-flex-ms-flex-align-baseline">
    <div class="exemple-flex-item" style="font-size:26px; ">1 ) <b>-ms-flex-align : baseline; </b></div>
    <p class="exemple-flex-item">2 ) <b>-ms-flex-align : baseline; </b> Lorem ipsum dolor sit amet.</p>
</div>

<div class="exemple exemple-flex-container-col exemple-flex-ms-flex-align-stretch">
    <div class="exemple-flex-item">1 ) <b>-ms-flex-align : stretch; </b></div>
    <p class="exemple-flex-item">2 ) <b>-ms-flex-align : stretch; </b> Lorem ipsum dolor sit amet.</p>
</div>
Voir de code -ms-flex-align dans :

Interprétation du code de la propriété -ms-flex-align CSS par votre navigateur.

1 ) -ms-flex-align valeur par défaut

2 ) -ms-flex-align valeur par défaut Lorem ipsum dolor sit amet.

3 ) -ms-flex-align valeur par défaut Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. 4 ) -ms-flex-align valeur par défaut Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
5 ) -ms-flex-align valeur par défaut

6 ) -ms-flex-align valeur par défaut Lorem ipsum dolor sit amet.

1 ) -ms-flex-align : start;

2 ) -ms-flex-align : start; Lorem ipsum dolor sit amet.

3 ) -ms-flex-align : start; Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. 4 ) -ms-flex-align : start; Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
5 ) -ms-flex-align : start;

6 ) -ms-flex-align : start; Lorem ipsum dolor sit amet.

1 ) -ms-flex-align : end;

2 ) -ms-flex-align : end; Lorem ipsum dolor sit amet.

3 ) -ms-flex-align : end; Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. 4 ) -ms-flex-align : end; Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
5 ) -ms-flex-align : end;

6 ) -ms-flex-align : end; Lorem ipsum dolor sit amet.

1 ) -ms-flex-align : center;

2 ) -ms-flex-align : center; Lorem ipsum dolor sit amet.

3 ) -ms-flex-align : center; Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. 4 ) -ms-flex-align : center; Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
5 ) -ms-flex-align : center;

6 ) -ms-flex-align : center; Lorem ipsum dolor sit amet.

1 ) -ms-flex-align : baseline;

2 ) -ms-flex-align : baseline; Lorem ipsum dolor sit amet.

3 ) -ms-flex-align : baseline; Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. 4 ) -ms-flex-align : baseline; Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
5 ) -ms-flex-align : baseline;

6 ) -ms-flex-align : baseline; Lorem ipsum dolor sit amet.

1 ) -ms-flex-align : stretch;

2 ) -ms-flex-align : stretch; Lorem ipsum dolor sit amet.

3 ) -ms-flex-align : stretch; Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. 4 ) -ms-flex-align : stretch; Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
5 ) -ms-flex-align : stretch;

6 ) -ms-flex-align : stretch; Lorem ipsum dolor sit amet.

1 ) -ms-flex-align par défaut;

2 ) -ms-flex-align par défaut; Lorem ipsum dolor sit amet.

1 ) -ms-flex-align : start;

2 ) -ms-flex-align : start; Lorem ipsum dolor sit amet.

1 ) -ms-flex-align : end;

2 ) -ms-flex-align : end; Lorem ipsum dolor sit amet.

1 ) -ms-flex-align : center;

2 ) -ms-flex-align : center; Lorem ipsum dolor sit amet.

1 ) -ms-flex-align : baseline;

2 ) -ms-flex-align : baseline; Lorem ipsum dolor sit amet.

1 ) -ms-flex-align : stretch;

2 ) -ms-flex-align : stretch; Lorem ipsum dolor sit amet.

Interprétation normale du code de la propriété CSS -ms-flex-align (copie d'écran).

copie d'écran de l'affichage de la propriété CSS -ms-flex-align


Aller en haut de la page

Vos paramètres de cookies

Ce site utilise des cookies pour améliorer votre expérience utilisateur et optimiser le fonctionnement du site.
Des contenus publicitaires vous sont aussi présentés, ainsi que cookies de partages sur les réseaux sociaux.

Vous pouvez accepter ces cookies en cliquant sur « Autoriser tous les cookies », cliquer sur « Paramétrer les cookies » pour gérer vos préférences de cookies.