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

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

<style>
.exemple-flex-ms-flex-line-pack-start{  : start; }
.exemple-flex-ms-flex-line-pack-end{  : end; }
.exemple-flex-ms-flex-line-pack-center{  : center; }
.exemple-flex-ms-flex-line-pack-justify{  : justify; }
.exemple-flex-ms-flex-line-pack-distribute{  : distribute; }
.exemple-flex-ms-flex-line-pack-stretch{  : stretch; }

.exemple-flex-container-col,
.exemple-flex-container-row {  : row;  : wrap;  : -ms-flexbox; height:300px; width:300px; border-color:#666; }
.exemple-flex-container-col {  : column; height:50px; width:auto; border-color:#2a712a; }
 
/* Annule le multi-ligne au passage de la souris */
.exemple-flex-container-row:hover {  : none }

.exemple { border-width:1px; border-style:solid; margin-bottom:10px; padding:5px; }
.exemple-flex-item { border:1px dotted #666; width:100px; }
</style>
<div class="exemple exemple-flex-container-row">
    <div class="exemple-flex-item">1 ) <b>-ms-flex-line-pack par défaut</b></div>
    <div class="exemple-flex-item">2 ) <b>-ms-flex-line-pack par défaut</b></div>
    <div class="exemple-flex-item">3 ) <b>-ms-flex-line-pack par défaut</b></div>
    <div class="exemple-flex-item">1 ) <b>-ms-flex-line-pack par défaut</b></div>
    <div class="exemple-flex-item">2 ) <b>-ms-flex-line-pack par défaut</b></div>
</div>

<div class="exemple exemple-flex-container-row exemple-flex-ms-flex-line-pack-start">
    <div class="exemple-flex-item">1 ) <b>-ms-flex-line-pack : start; </b></div>
    <div class="exemple-flex-item">2 ) <b>-ms-flex-line-pack : start; </b></div>
    <div class="exemple-flex-item">3 ) <b>-ms-flex-line-pack : start; </b></div>
    <div class="exemple-flex-item">1 ) <b>-ms-flex-line-pack : start; </b></div>
    <div class="exemple-flex-item">2 ) <b>-ms-flex-line-pack : start; </b></div>
</div>

<div class="exemple exemple-flex-container-row exemple-flex-ms-flex-line-pack-end">
    <div class="exemple-flex-item">1 ) <b>-ms-flex-line-pack : end; </b></div>
    <div class="exemple-flex-item">2 ) <b>-ms-flex-line-pack : end; </b></div>
    <div class="exemple-flex-item">3 ) <b>-ms-flex-line-pack : end; </b></div>
    <div class="exemple-flex-item">1 ) <b>-ms-flex-line-pack : end; </b></div>
    <div class="exemple-flex-item">2 ) <b>-ms-flex-line-pack : end; </b></div>
</div>

<div class="exemple exemple-flex-container-row exemple-flex-ms-flex-line-pack-center">
    <div class="exemple-flex-item">1 ) <b>-ms-flex-line-pack : center; </b></div>
    <div class="exemple-flex-item">2 ) <b>-ms-flex-line-pack : center; </b></div>
    <div class="exemple-flex-item">3 ) <b>-ms-flex-line-pack : center; </b></div>
    <div class="exemple-flex-item">1 ) <b>-ms-flex-line-pack : center; </b></div>
    <div class="exemple-flex-item">2 ) <b>-ms-flex-line-pack : center; </b></div>
</div>

<div class="exemple exemple-flex-container-row exemple-flex-ms-flex-line-pack-justify">
    <div class="exemple-flex-item">1 ) <b>-ms-flex-line-pack : justify; </b></div>
    <div class="exemple-flex-item">2 ) <b>-ms-flex-line-pack : justify; </b></div>
    <div class="exemple-flex-item">3 ) <b>-ms-flex-line-pack : justify; </b></div>
    <div class="exemple-flex-item">1 ) <b>-ms-flex-line-pack : justify; </b></div>
    <div class="exemple-flex-item">2 ) <b>-ms-flex-line-pack : justify; </b></div>
</div>

<div class="exemple exemple-flex-container-row exemple-flex-ms-flex-line-pack-distribute">
    <div class="exemple-flex-item">1 ) <b>-ms-flex-line-pack : distribute; </b></div>
    <div class="exemple-flex-item">2 ) <b>-ms-flex-line-pack : distribute; </b></div>
    <div class="exemple-flex-item">3 ) <b>-ms-flex-line-pack : distribute; </b></div>
    <div class="exemple-flex-item">1 ) <b>-ms-flex-line-pack : distribute; </b></div>
    <div class="exemple-flex-item">2 ) <b>-ms-flex-line-pack : distribute; </b></div>
</div>

<div class="exemple exemple-flex-container-row exemple-flex-ms-flex-line-pack-stretch">
    <div class="exemple-flex-item">1 ) <b>-ms-flex-line-pack : stretch; </b></div>
    <div class="exemple-flex-item">2 ) <b>-ms-flex-line-pack : stretch; </b></div>
    <div class="exemple-flex-item">3 ) <b>-ms-flex-line-pack : stretch; </b>Lorem ipsum dolor sit amet, consectetuer.</div>
    <div class="exemple-flex-item">1 ) <b>-ms-flex-line-pack : stretch; </b></div>
    <div class="exemple-flex-item">2 ) <b>-ms-flex-line-pack : stretch; </b></div>
</div>

<div class="exemple exemple-flex-container-col">
    <div class="exemple-flex-item">1 ) <b>-ms-flex-line-pack par défaut; </b></div>
    <div class="exemple-flex-item">2 ) <b>-ms-flex-line-pack par défaut; </b></div>
    <div class="exemple-flex-item">3 ) <b>-ms-flex-line-pack par défaut; </b></div>
</div>

<div class="exemple exemple-flex-container-col exemple-flex-ms-flex-line-pack-start">
    <div class="exemple-flex-item">1 ) <b>-ms-flex-line-pack : start; </b></div>
    <div class="exemple-flex-item">2 ) <b>-ms-flex-line-pack : start; </b></div>
    <div class="exemple-flex-item">3 ) <b>-ms-flex-line-pack : start; </b></div>
</div>

<div class="exemple exemple-flex-container-col exemple-flex-ms-flex-line-pack-end">
    <div class="exemple-flex-item">1 ) <b>-ms-flex-line-pack : end; </b></div>
    <div class="exemple-flex-item">2 ) <b>-ms-flex-line-pack : end; </b></div>
    <div class="exemple-flex-item">3 ) <b>-ms-flex-line-pack : end; </b></div>
</div>

<div class="exemple exemple-flex-container-col exemple-flex-ms-flex-line-pack-center">
    <div class="exemple-flex-item">1 ) <b>-ms-flex-line-pack : center; </b></div>
    <div class="exemple-flex-item">2 ) <b>-ms-flex-line-pack : center; </b></div>
    <div class="exemple-flex-item">3 ) <b>-ms-flex-line-pack : center; </b></div>
</div>

<div class="exemple exemple-flex-container-col exemple-flex-ms-flex-line-pack-justify">
    <div class="exemple-flex-item">1 ) <b>-ms-flex-line-pack : justify; </b></div>
    <div class="exemple-flex-item">2 ) <b>-ms-flex-line-pack : justify; </b></div>
    <div class="exemple-flex-item">3 ) <b>-ms-flex-line-pack : justify; </b></div>
</div>

<div class="exemple exemple-flex-container-col exemple-flex-ms-flex-line-pack-distribute">
    <div class="exemple-flex-item">1 ) <b>-ms-flex-line-pack : distribute; </b></div>
    <div class="exemple-flex-item">2 ) <b>-ms-flex-line-pack : distribute; </b></div>
    <div class="exemple-flex-item">3 ) <b>-ms-flex-line-pack : distribute; </b></div>
</div>

<div class="exemple exemple-flex-container-col exemple-flex-ms-flex-line-pack-stretch">
    <div class="exemple-flex-item">1 ) <b>-ms-flex-line-pack : stretch; </b></div>
    <div class="exemple-flex-item">2 ) <b>-ms-flex-line-pack : stretch; </b></div>
    <div class="exemple-flex-item">3 ) <b>-ms-flex-line-pack : stretch; </b></div>
</div>

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

1 ) -ms-flex-line-pack par défaut
2 ) -ms-flex-line-pack par défaut
3 ) -ms-flex-line-pack par défaut
1 ) -ms-flex-line-pack par défaut
2 ) -ms-flex-line-pack par défaut
1 ) -ms-flex-line-pack : start;
2 ) -ms-flex-line-pack : start;
3 ) -ms-flex-line-pack : start;
1 ) -ms-flex-line-pack : start;
2 ) -ms-flex-line-pack : start;
1 ) -ms-flex-line-pack : end;
2 ) -ms-flex-line-pack : end;
3 ) -ms-flex-line-pack : end;
1 ) -ms-flex-line-pack : end;
2 ) -ms-flex-line-pack : end;
1 ) -ms-flex-line-pack : center;
2 ) -ms-flex-line-pack : center;
3 ) -ms-flex-line-pack : center;
1 ) -ms-flex-line-pack : center;
2 ) -ms-flex-line-pack : center;
1 ) -ms-flex-line-pack : justify;
2 ) -ms-flex-line-pack : justify;
3 ) -ms-flex-line-pack : justify;
1 ) -ms-flex-line-pack : justify;
2 ) -ms-flex-line-pack : justify;
1 ) -ms-flex-line-pack : distribute;
2 ) -ms-flex-line-pack : distribute;
3 ) -ms-flex-line-pack : distribute;
1 ) -ms-flex-line-pack : distribute;
2 ) -ms-flex-line-pack : distribute;
1 ) -ms-flex-line-pack : stretch;
2 ) -ms-flex-line-pack : stretch;
3 ) -ms-flex-line-pack : stretch;Lorem ipsum dolor sit amet, consectetuer.
1 ) -ms-flex-line-pack : stretch;
2 ) -ms-flex-line-pack : stretch;
1 ) -ms-flex-line-pack par défaut;
2 ) -ms-flex-line-pack par défaut;
3 ) -ms-flex-line-pack par défaut;
1 ) -ms-flex-line-pack : start;
2 ) -ms-flex-line-pack : start;
3 ) -ms-flex-line-pack : start;
1 ) -ms-flex-line-pack : end;
2 ) -ms-flex-line-pack : end;
3 ) -ms-flex-line-pack : end;
1 ) -ms-flex-line-pack : center;
2 ) -ms-flex-line-pack : center;
3 ) -ms-flex-line-pack : center;
1 ) -ms-flex-line-pack : justify;
2 ) -ms-flex-line-pack : justify;
3 ) -ms-flex-line-pack : justify;
1 ) -ms-flex-line-pack : distribute;
2 ) -ms-flex-line-pack : distribute;
3 ) -ms-flex-line-pack : distribute;
1 ) -ms-flex-line-pack : stretch;
2 ) -ms-flex-line-pack : stretch;
3 ) -ms-flex-line-pack : stretch;

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

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