/* estilos de segunda prueba flexbox */


.item {
    border: 1px solid black;
    background-color: rgb(152, 228, 221);
    color: white;
    width: 100px;
    height: 50px;
    font-size: 26px;
    text-align: center;
    font-weight: bold; }

.container1 {
    /*para indicar que vamos a trabajar con flexbox. se ponen en fila por defecto*/
    display: flex;
    background: rgb(133, 133, 224);
    border: 2px solid rgb(235, 11, 11);
    margin: 50px;
    /*como ya estaba en horizontal, con la siguiente orden no veremos cambios*/
    flex-direction: row; 
    /*para justifica alineacion al comienzo del contenedor. asi por defecto*/
    justify-content: flex-start;}

.container2 {
    display: flex;
    background: rgb(11, 232, 240);
    border: 2px solid red;
    margin: 50px;
    flex-direction: row; 
    /*para poner al final del contenedor segun el orden del html*/
    justify-content: flex-end;}

.container3 {
    display: flex;
    background: rgb(33, 235, 117);
    border: 2px solid red;
    margin: 50px;
    /*si quisieramos en orden inverso pondriamos row-reverse*/
    flex-direction: row;
    /*para poner en el centro del contenedor segun el orden del html*/  
    justify-content: center;}

.container4 {
    display: flex;
    background: rgb(72, 83, 243);
    border: 2px solid red;
    margin: 50px;
    /*si quisieramos en orden inverso pondriamos row-reverse*/
    flex-direction: row;
    /*para espaciar entre ellos segun el orden del html*/  
    justify-content: space-between;}


.container5 {
    display: flex;
    background: rgb(233, 214, 42);
    border: 2px solid rgb(6, 38, 219);
    margin: 50px;
    /*si quisieramos en orden inverso pondriamos row-reverse*/
    flex-direction: row;
    /*para generar espacio entre los item*/  
    justify-content: space-around;}
    
.container6 {
    display: flex;
    background: rgb(250, 134, 26);
    border: 2px solid rgb(22, 243, 14);
    margin: 50px;
    /*si quisieramos en orden inverso pondriamos row-reverse*/
    flex-direction: row;
    /*para generar espacio entre los item teniendo en cuenta los extremos*/  
    justify-content: space-evenly;}