Listado completo de tutoriales

69 - Flexbox - (flex-basis aplicada a los items)


La propiedad flex-basis define el ancho con respecto al eje principal (si el contenedor es horizontal luego flex-basic representa el width, en cambio si el contenedor está en forma vertical la propiedad flex-basis representa el height)

El tamaño base que definimos en la propiedad flex-basis puede no llegar a cumplirse dependiendo de las otras propiedades vistas que se aplican a los items.

Esta propiedad es fundamental para definir los tamaños de los items. Podemos emplear las diferentes unidades de medida que conocemos píxeles, rem, em, % etc.

El valor por defecto que almacena la propiedad "flex-basis" es "auto", es decir que se calcula su medida en forma automática.

Probemos de cambiar la propiedad "flex-basis" para los tres items con los valores 20% para el primer item 60% para el segundo y 20% para el tercero:

Problema: Definir un Flexbox con tres items. Hacer el primero y último item tengan una medida de 20% y un valor 60% para el item central.

pagina1.html

<!DOCTYPE html>
<html>
<head>
  <title>Problema</title>
  <meta charset="UTF-8">
  <link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
  <div id="contenedor1">
    <div id="item1">Caja 1</div>
    <div id="item2">Caja 2</div>
    <div id="item3">Caja 3</div>
  </div>
</body>
</html>

estilos.css

#contenedor1{
  display: flex;
  background-color: #000;  
  height: 300px;
  color:white;
  font-size:2rem;
}

#item1 {  
  flex-basis: 20%;
  background-color: #0078A6;
}
#item2 {
  flex-basis: 60%;  
  background-color: #0084B6;
}
#item3 {
  flex-basis: 20%;  
  background-color: #008CC1;
}

Retornar