Mini ejercicio flex

Usando solo flexbox crear una fila con cuatro artículos que ocupen todo el ancho de la página y dentro de cada artículo una cabecera y debajo un botón centrado.

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		#contenedor {
			display: flex;
			justify-content: space-around;
		}

		#contenedor>div {
			background-color: bisque;
			background: linear-gradient(to right, bisque, #eacda3);
			flex-basis: 200px;
			border-radius: 20px 0;
			box-shadow: 7px 7px 5px #DDDDDD;
		}

		#contenedor h1 {
			text-align: center;
		}

		#contenedor>div>div {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100px;
		}
	</style>
</head>

<body>
	<div id="contenedor">
		<div>
			<h1>Artículo</h1>
			<div><button>Pínchame</button></div>
		</div>
		<div>
			<h1>Artículo</h1>
			<div><button>Pínchame</button></div>
		</div>
		<div>
			<h1>Artículo</h1>
			<div><button>Pínchame</button></div>
		</div>
		<div>
			<h1>Artículo</h1>
			<div><button>Pínchame</button></div>
		</div>
	</div>
</body>

</html>

Publicado por

Avatar del usuario

Juan Pablo Fuentes

Formador de programación y bases de datos