header {
    background-color: gray;
    text-align: center;
}

h1 {
    color: red;
    margin: 0;
}

body {
    margin: 0;
    background-color:#CACACA;
}

main {
    margin:0 2em 0 2em;
}

ul {
    display: flex;
    border: 1px dotted red;
    padding: 0;
}

li {
    border: 1px solid gray;
    list-style-type: none;
    display: flex;
    height : 2em;
}

.defaut {
    flex-direction: row;
    justify-content: flex-start;

}

.reverse {
    flex-direction: row-reverse;

}

.reverse li {
    justify-content: flex-end;
}

.column {
    flex-direction: column;
}

.columnReverse {
    flex-direction: column-reverse;
}

.nowrap {
    flex-wrap: nowrap;
    width: 20em;
}

.wrap {
    flex-wrap: wrap;
    width: 20em;
}

.center {
    align-items: center;
}
.center li {
    align-items: center;
}
.grand {
    height: 12em;
}

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

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

.center2 {
    justify-content: center;
}

.start2 {
    justify-content: flex-start;
}

.end2 {
    justify-content: flex-end;
}

.between {
    justify-content: space-between;
}

.around {
    justify-content: space-around;
}

.evenly {
    justify-content: space-evenly;
}

.order :nth-child(1) {
    order: 2;
}

.order :nth-child(2) {
    order: 3;
}

.order :nth-child(3) {
    order: 1;
}

.order :nth-child(4) {
    order: 3;
}

.order :nth-child(5) {
    order: 1;
}

.grow :nth-child(1) {
    flex-grow: 2;
}

.grow :nth-child(2) {
    flex-grow: 8;
}

.grow :nth-child(3) {
    flex-grow: 1;
}

.grow :nth-child(4) {
    flex-grow: 2;
}

.grow :nth-child(5) {
    flex-grow: 5;
}

.shrink :nth-child(1) {
    flex-shrink: 2;
}
.shrink :nth-child(2) {
    flex-shrink: 4;
}
.shrink :nth-child(3) {
    flex-shrink: 6;
}
.shrink :nth-child(4) {
    flex-shrink: 1;
}
.shrink :nth-child(5) {
    flex-shrink: 4;
}


section {
    border: 1px dotted red;
    display: flex;
    margin:1em;
}

article {
    flex-grow:1;
    background-color:white;
    margin:1em;
    padding: 1em;
}

.article1 {
    flex-grow:2
}

footer {
    background-color:#565656;
    color:white;
    text-align:center;
    padding-top:3em;
}