style.css

@charset "UTF-8";

* {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border-radius: 2px;
}

body {
    background-image: url(fundo.jpg);
    background-position: center;
    background-repeat: no-repeat;
    
}

section {
    background-color: aliceblue;
    opacity: .7;
    margin: 40vh auto;
    padding: 20px;
    width: max-content;
    height: max-content;
}

.container {      /*principais regras de container*/
    opacity: 1;
    padding: 10px;
    border: 2px solid black;
    width: 300px;    
    height: 300px;
    margin-bottom: 10px;
    display: flex;
    text-align: center;
        
    justify-content: space-around; /*horizontal*/
    align-items: center; /*vertical*/

    flex-wrap: wrap; /*area máxima atingida > preenche a próx*/
}

.p {
    width: 300px;
    display: block;
    text-align: center;
    font-weight: bolder;
}

.item {
    border: 2px solid red;
    height: 50px;
    width: 50px;
    padding-top: 25px;
}

.box {
    border: 2px solid blue;
    height: 50px;
    margin: 25px;
    flex: 1 1 50px;
    padding-top: 25px;
    /*grow, shrink, bases*/
}

/* #item-1 {
    flex-grow: 2;  
}

#item-2, #item-3 {
    flex-grow: 1;  
}

#item-2 {
    flex-basis: 100px; 
}

#item-3 {
    flex-shrink: 2;
} */

#item-1 {
    order: 2;
}
#item-2 {
    order: 3;
}
#item-3 {
    order: 1;
}