Ejercicio 1

💻 Código HTML

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="author" content="Antonio Berrocal Piris">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/dado_flex.css">
    <title>Caras dado</title>
</head>

<body>

    <div class="ficha uno">
        <div class="cara">
            <div></div>
        </div>
    </div>

    <div class="ficha dos">
        <div class="cara">
            <div></div>
            <div></div>
        </div>
    </div>

    <div class="ficha tres">
        <div class="cara">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</body>

</html>

🎨 Código CSS

/*
Basado en https://codepen.io/LandonSchropp/pen/KpzzGo/?editors=1100 
*/

* {
  box-sizing: border-box;
}

.ficha {
  background-color: #e7e7e7;
  box-shadow: inset 0 5px white, inset 0 -5px #bbb, inset 5px 0 #d7d7d7,
    inset -5px 0 #d7d7d7;
  border-radius: 10%;

  width: 104px;  /* A eliminar en ejercicios posteriores */
  height: 104px;  /* A eliminar en ejercicios posteriores */
}

.ficha .cara {
  padding: 4px; 
}

.ficha .cara > div {
  width: 24px;
  height: 24px;
  margin: 4px;
  border-radius: 50%;
  background-color: #333;
  box-shadow: inset 0 3px #111, inset 0 -3px #555;
}

/* EJERCICIO CLASE */

.ficha.uno.cara {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.ficha.dos .cara {
  display: flex;
  height: 100%;
  justify-content: space-between;
  align-items: flex-start;

}

.ficha.dos .cara > div:last-child {
  align-self: flex-end;
}

.ficha.tres .cara {
  display: flex;
  height: 100%;
  justify-content: space-between;
  align-items: flex-start;
}

.ficha.tres .cara > div:last-child(2) {
  align-self: center;
}

.ficha.tres .cara > div:last-child(3){
  align-self: flex-end;
}

📸 Resultado del ejercicio

Resultado
⬅ Volver