/* estilos de primera prueba flexbox */


.item {
    border: 1px solid black;
    background-color: gray;
    color: white;
    width: 50px;
    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: blue;
    border: 2px solid black;
    margin: 50px;
    /*como ya estaba en horizontal, con la siguiente orden no veremos cambios*/
    flex-direction: row; }

    
.container2 {
    display: flex;
    background: rgb(11, 232, 240);
    border: 2px solid rgb(243, 16, 16);
    margin: 50px;
       /*para poner en fila invertida*/
    flex-direction: row-reverse; }

.container3 {
    display: flex;
    background: rgb(11, 240, 80);
    border: 2px solid rgb(216, 31, 207);
    margin: 50px;
    /*para poner en columna*/
    flex-direction: column; }

.container4 {
    display: flex;
    background: rgb(241, 238, 40);
    border: 2px solid rgb(71, 31, 216);
    margin: 50px;
    /*para poner en columna inversa*/
    flex-direction: column-reverse; }