/* estilos de quinta prueba flexbox con align-item (alinear contenidos) */


.item {
    border: 3px solid black;
    background-color: rgb(216, 196, 213);
    color: white;
    width: 100px;
    /*height: auto;*/
    font-size: 26px;
    text-align: center;
    font-weight: bold;}

.container1 .item:first-child {
    background-color: tomato;}


.container1 {
    /*para indicar que vamos a trabajar con flexbox. se ponen en fila por defecto*/
    display: flex;
    background: rgb(143, 145, 143);
    border: 2px solid rgb(235, 11, 11);
    margin: 50px;
    height: 150px;
    /*le decimos que los item se coloquen al principio del contenedor y desde arriba*/
    align-items: flex-start;
    justify-content: flex-start;}

.container2 {
    /*para indicar que vamos a trabajar con flexbox. se ponen en fila por defecto*/
    display: flex;
    background: rgb(143, 145, 143);
    border: 2px solid rgb(235, 11, 11);
    margin: 50px;
    height: 150px;
    /*le decimos que los item se coloquen al principio del contenedor y desde abajo*/
    justify-content: flex-start;
    align-items: flex-end;}

.container3 {
    /*para indicar que vamos a trabajar con flexbox. se ponen en fila por defecto*/
    display: flex;
    background: rgb(143, 145, 143);
    border: 2px solid rgb(235, 11, 11);
    margin: 50px;
    height: 150px;
    /*le decimos que los item se coloquen al principio del contenedor y a media altura*/
    justify-content: flex-start;
    align-items: center;}

.container4 {
    /*para indicar que vamos a trabajar con flexbox. se ponen en fila por defecto*/
    display: flex;
    background: rgb(143, 145, 143);
    border: 2px solid rgb(235, 11, 11);
    margin: 50px;
    height: 150px;
    /*le decimos que los item se coloquen al principio del contenedor y cogeria la altura del contenedor padre*/
    justify-content: flex-start;
    align-items: stretch;}

.container5 {
    /*para indicar que vamos a trabajar con flexbox. se ponen en fila por defecto*/
    display: flex;
    background: rgb(143, 145, 143);
    border: 2px solid rgb(235, 11, 11);
    margin: 50px;
    height: 150px;
    /*le decimos que los item se coloquen al principio del contenedor y a partir de la linea de base del item (complicado. no se ve utilidad)*/
    justify-content: flex-start;
    align-items: baseline;}

.container6 {
    /*para indicar que vamos a trabajar con flexbox. se ponen en fila por defecto*/
    display: flex;
    background: rgb(143, 145, 143);
    border: 2px solid rgb(235, 11, 11);
    margin: 50px;
    height: 150px;
    /*le decimos que los item se coloquen al final del contenedor y desde arriba*/
    justify-content: flex-end;
    align-items: flex-start;}

.container7 {
    /*para indicar que vamos a trabajar con flexbox. se ponen en fila por defecto*/
    display: flex;
    background: rgb(143, 145, 143);
    border: 2px solid rgb(235, 11, 11);
    margin: 50px;
    height: 150px;
    /*le decimos que los item se coloquen al final del contenedor y desde abajo*/
    justify-content: flex-end;
    align-items: flex-end;}

.container8 {
    /*para indicar que vamos a trabajar con flexbox. se ponen en fila por defecto*/
    display: flex;
    background: rgb(143, 145, 143);
    border: 2px solid rgb(235, 11, 11);
    margin: 50px;
    height: 150px;
    /*le decimos que los item se coloquen al final del contenedor y centrados*/
    justify-content: flex-end;
    align-items: center;}

.container9 {
    /*para indicar que vamos a trabajar con flexbox. se ponen en fila por defecto*/
    display: flex;
    background: rgb(143, 145, 143);
    border: 2px solid rgb(235, 11, 11);
    margin: 50px;
    height: 150px;
    /*le decimos que los item se coloquen al final del contenedor y ocupando en altura todo el contenedor*/
    justify-content: flex-end;
    align-items: stretch;}

.container10 {
    /*para indicar que vamos a trabajar con flexbox. se ponen en fila por defecto*/
    display: flex;
    background: rgb(143, 145, 143);
    border: 2px solid rgb(235, 11, 11);
    margin: 50px;
    height: 150px;
    /*le decimos que los item se coloquen al final del contenedor y a partir de la linea de base del item (complicado. no se ve utilidad)*/
    justify-content: flex-end;
    align-items: baseline;}

.container11 {
    /*para indicar que vamos a trabajar con flexbox. se ponen en fila por defecto*/
    display: flex;
    background: rgb(143, 145, 143);
    border: 2px solid rgb(235, 11, 11);
    margin: 50px;
    height: 150px;
    /*le decimos que los item se coloquen centrado en el contenedor y a partir de arriba */
    justify-content: center;
    align-items: flex-start;}

.container12 {
    /*para indicar que vamos a trabajar con flexbox. se ponen en fila por defecto*/
    display: flex;
    background: rgb(143, 145, 143);
    border: 2px solid rgb(235, 11, 11);
    margin: 50px;
    height: 150px;
    /*le decimos que los item se coloquen centrado en el contenedor y a partir de abajo */
    justify-content: center;
    align-items: flex-end;}

.container13 {
    /*para indicar que vamos a trabajar con flexbox. se ponen en fila por defecto*/
    display: flex;
    background: rgb(143, 145, 143);
    border: 2px solid rgb(235, 11, 11);
    margin: 50px;
    height: 150px;
    /*le decimos que los item se coloquen centrado en el contenedor y centrado */
    justify-content: center;
    align-items: center;
    /*y si le metemos un column-gap nos separa los item*/
    column-gap: 25px;}

.container14 {
    /*para indicar que vamos a trabajar con flexbox. se ponen en fila por defecto*/
    display: flex;
    background: rgb(143, 145, 143);
    border: 2px solid rgb(235, 11, 11);
    margin: 50px;
    height: 150px;
    /*le decimos que los item se coloquen centrado en el contenedor y ocupando en altura todo el contenedor */
    justify-content: center;
    align-items: stretch;
    /*y si le metemos un column-gap nos separa los item*/
    column-gap: 25px;}

.container15 {
    /*para indicar que vamos a trabajar con flexbox. se ponen en fila por defecto*/
    display: flex;
    background: rgb(143, 145, 143);
    border: 2px solid rgb(235, 11, 11);
    margin: 50px;
    height: 150px;
    /*le decimos que los item se coloquen centrado en el contenedor y con referencia baseline */
    justify-content: center;
    align-items: baseline;
    /*y si le metemos un column-gap nos separa los item*/
    column-gap: 25px;}

.container16 {
    /*para indicar que vamos a trabajar con flexbox. se ponen en fila por defecto*/
    display: flex;
    background: rgb(143, 145, 143);
    border: 2px solid rgb(235, 11, 11);
    margin: 50px;
    height: 150px;
    /*le decimos que los item se coloquen centrado en el contenedor y ocupando el espacio entre ellos */
    justify-content: space-between;
    align-items: flex-start;}

.container17 {
    /*para indicar que vamos a trabajar con flexbox. se ponen en fila por defecto*/
    display: flex;
    background: rgb(143, 145, 143);
    border: 2px solid rgb(235, 11, 11);
    margin: 50px;
    height: 150px;
    /*le decimos que los item se coloquen centrado en el contenedor y ocupando el espacio entre ellos */
    justify-content: space-between;
    align-items: flex-end;}

.container18 {
    /*para indicar que vamos a trabajar con flexbox. se ponen en fila por defecto*/
    display: flex;
    background: rgb(143, 145, 143);
    border: 2px solid rgb(235, 11, 11);
    margin: 50px;
    height: 150px;
    /*le decimos que los item se coloquen centrado en el contenedor y centrando */
    justify-content: space-between;
    align-items: center;}

.container18b {
    /*para indicar que vamos a trabajar con flexbox. se ponen en fila por defecto*/
    display: flex;
    background: rgb(143, 145, 143);
    border: 2px solid rgb(235, 11, 11);
    margin: 50px;
    height: 150px;
    /*le decimos que los item se coloquen centrado en el contenedor y centrando */
    justify-content: space-between;
    align-items: center;
     /*si le ponemos flex-direction column nos lo pone en vertical */
    flex-direction: column;}

.container19 {
    /*para indicar que vamos a trabajar con flexbox. se ponen en fila por defecto*/
    display: flex;
    background: rgb(143, 145, 143);
    border: 2px solid rgb(235, 11, 11);
    margin: 50px;
    height: 150px;
    /*le decimos que los item se coloquen centrado en el contenedor y centrando */
    justify-content: space-between;
    align-items: stretch;}

.container20 {
    /*para indicar que vamos a trabajar con flexbox. se ponen en fila por defecto*/
    display: flex;
    background: rgb(143, 145, 143);
    border: 2px solid rgb(235, 11, 11);
    margin: 50px;
    height: 150px;
    /*le decimos que los item se coloquen centrado en el contenedor y alineado con baseline */
    justify-content: space-between;
    align-items: baseline;}

.container21 {
    /*para indicar que vamos a trabajar con flexbox. se ponen en fila por
     defecto*/
    display: flex;
    background: rgb(143, 145, 143);
    border: 2px solid rgb(235, 11, 11);
    margin: 50px;
    height: 150px;
    justify-content: space-around;
    align-items: flex-start;}

.container22 {
    /*para indicar que vamos a trabajar con flexbox. se ponen en fila por
    defecto*/
    display: flex;
    background: rgb(143, 145, 143);
    border: 2px solid rgb(235, 11, 11);
    margin: 50px;
    height: 150px;
    justify-content: space-evenly;
    align-items: center;}