Tutorial básico de uso de flexbox.

- ¿Qué es flex y por qué es importante?

Flex es una propiedad de CSS que hace que organizar el contenido sea fácil y flexible. En lugar de usar trucos complejos para alinear cosas, flex las organiza automáticamente.

Ejemplo.
Para el ejemplo haremos una tarjeta de identificación de prueba. A continuación mostramos el código css

1. Establecemos un div en el html(que se llamara card). En el css especificamos que usaremos una fila horizontal con display flex, y con flex-wrap mas el valor de wrap se le indica que dado que salga de la tarjeta tome el espacio de abajo. Tambien colocamos detalles como de altura y ancho, color.

.card {
	display: flex;
	flex-wrap: wrap;
	background-color: white;  
	width: 600px;
	height: 300px;
	margin: 100px;
	border-radius: 20px;
	border: 3px solid black;
}

1. Ahora dentro de la tarjeta tenemos 3 elementos, la foto de nuestro personaje ficticio, los datos y su firma. Estos seran div’s dentro del div card en el html, pero en el css esos atributos los colamos como mas nos gusten, en mi caso estos atributos coloque.

.foto img {
            width: 200px;
            height: 200px;
            margin: 10px;
        }

        h1 {
            font-family: Verdana, Geneva, Tahoma, sans-serif;
        }

        .datos {
            width: 370 px;
            height: 120px;
        }

        .datos p {
            margin-top: 20px;
            margin-left: 20px;
            font-family: Georgia, 'Times New Roman', Times, serif;
            
        }

        .datos {
            background-color: papayawhip;
        }
        .sign img{
            margin-left: 50px;
            height: 70px;
        }

1. El resultado final es que la firma se coloca debajo de la foto y los datos, porque no tiene espacio asi que toma el de abajo.

- Ventajas de usar flex:

1. Es fácil de usar: Solo necesitas declarar display: flex; para empezar.
2. Es flexible: Se adapta automáticamente al tamaño de los elementos.
3. Ahorra tiempo: No necesitas cálculos complicados para alinear elementos.
4. Es responsivo: Funciona muy bien con pantallas pequeñas como celulares.