ul[class*="test"] {
	padding: 0;
	list-style: none;
}

/* *************************
flex-direction
************************* */

.test-default {
    display: flex;
    flex-direction: row;/* Comportement par défaut */
}

.test-direction-row-reverse {
    display: flex;
    flex-direction: row-reverse;
}

.test-direction-column {
    display: flex;
    flex-direction: column;
}

.test-direction-column-reverse {
    display: flex;
    flex-direction: column-reverse;
}

/* *************************
flex-wrap
************************* */
.test-nowrap {
    display: flex;
    width: 300px;
    flex-wrap: nowrap;/* Comportement par défaut */
}
.test-wrap {
    display: flex;
    width: 300px;
    flex-wrap: wrap;
}

/* *************************
align-items
************************* */
[class*="test-align-items"] li:nth-child(odd) {
	line-height: 4em;
}

.test-align-items-center {
    display: flex;
    align-items: center;
}

.test-align-items-start {
    display: flex;
    align-items: flex-start;
}

.test-align-items-end {
    display: flex;
    align-items: flex-end;
}

/* *************************
justify-content
************************* */
.test-justify-content-center {
    display: flex;
    justify-content: center;
}
.test-justify-content-start {
    display: flex;
    justify-content: flex-start;
}
.test-justify-content-end {
    display: flex;
    justify-content: flex-end;
}
.test-justify-content-space-between {
    display: flex;
    justify-content: space-between;
}
.test-justify-content-space-around {
    display: flex;
    justify-content: space-around;
}
.test-justify-content-space-evenly {
    display: flex;
    justify-content: space-evenly;
}

/* *************************
order
************************* */
.test-order {
    display: flex;
}

.test-order li:nth-child(1) {
	order: 4;
}
.test-order li:nth-child(2) {
	order: 2;
}
.test-order li:nth-child(3) {
	order: 6;
}
.test-order li:nth-child(4) {
	order: 1;
}
.test-order li:nth-child(5) {
	order: 3;
}
.test-order li:nth-child(6) {
	order: 5;
}

/* *************************
grow
************************* */

.test-grow {
	display: flex;
}

.test-grow > * {
    flex-grow: 1;/* Comble espace restant après application flex-basis */
    flex-basis: 8em;/* Comble espace restant en 1er */
}
.test-grow .x2 {
	flex-grow: 2;
}
.test-grow li:nth-child(3) {
    flex-grow: 2;
}

/* *************************
shrink
************************* */
.test-shrink {
    display: flex;
}

.test-shrink > * {
    flex-basis: 10em;
}

.test-shrink li:nth-child(3) {
    flex-shrink: 6;/* Réduit pour satisfaire en premier le dimensionnement autres boites */
}