|
|
|
@@ -0,0 +1,49 @@ |
|
|
|
.container{ |
|
|
|
background-color: bisque; |
|
|
|
padding: 10px; |
|
|
|
display: flex; |
|
|
|
/* flex-direction: row; |
|
|
|
flex-wrap: nowrap; */ |
|
|
|
height: 500px; |
|
|
|
flex-flow: row nowrap; |
|
|
|
justify-content: flex-start; |
|
|
|
align-items: stretch; |
|
|
|
/* align-content: stretch; only works on multiple lines */ |
|
|
|
} |
|
|
|
|
|
|
|
.container div { |
|
|
|
line-height: 40px; |
|
|
|
font-size: 20px; |
|
|
|
color: white; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
|
|
|
|
.div-1{ |
|
|
|
background-color: chocolate; |
|
|
|
/* flex-grow: 1; */ |
|
|
|
/* flex-shrink: 0; */ |
|
|
|
flex: 2 0 200px; |
|
|
|
order: 2; |
|
|
|
} |
|
|
|
.div-2{ |
|
|
|
background-color: darksalmon; |
|
|
|
flex: 1 1 100px; |
|
|
|
order: 1; |
|
|
|
} |
|
|
|
.div-3{ |
|
|
|
background-color: lime; |
|
|
|
flex: 1 1 100px; |
|
|
|
order: 5; |
|
|
|
} |
|
|
|
.div-4 |
|
|
|
{ |
|
|
|
background-color: thistle; |
|
|
|
flex: 1 1 100px; |
|
|
|
order: 3; |
|
|
|
} |
|
|
|
.div-5 |
|
|
|
{ |
|
|
|
background-color: rebeccapurple; |
|
|
|
flex: 1 1 100px; |
|
|
|
order: 10; |
|
|
|
} |
