123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566 |
- * {
- box-sizing: border-box;
- }
- body {
- margin: 0;
- border: 0;
- font-family: 'Roboto Mono', monospace;
- }
- h1 {
- font-size: 18px;
- }
- h2 {
- font-size: 16px;
- }
- h1,
- h2 {
- text-align: center;
- }
- .top,
- .middle,
- .bottom {
- width: 100px;
- height: 100px;
- background-color: dodgerblue;
- border: 2px solid lightgrey;
- margin: 10px 30px;
- }
- .top.side {
- flex-shrink: 2;
- }
- .top.center {
- flex-shrink: 1;
- }
- .middle.side {
- flex-shrink: 0;
- }
- .middle.center {
- }
- .bottom.side {
- }
- .bottom.center {
- flex-shrink: 2;
- }
- #top,
- #middle,
- #bottom {
- display: flex;
- background-color: whitesmoke;
- justify-content: center;
- min-height: 200px;
- align-items: center;
- }
|