- Teoría
- Teoría
La propiedad width: el ancho del elemento
Ya cambiamos el tipo de caja de <main>, y su contenido formó dos columnas automáticamente. Pero sus tamaños todavía no coinciden con el diseño. Veamos cómo ajustarlos.
De forma predeterminada, los elementos flex no pasan a otra línea y pueden reducir su tamaño en función del contenido. La sección de la fotografía quedó con el ancho de la imagen. La otra sección ocupó el resto del espacio por su texto, que intenta aprovechar todo el ancho posible incluso dentro de un elemento flex.
Por eso conviene definir explícitamente el ancho de los elementos flex que forman las columnas. La forma más sencilla es usar width:
width: 550px;De forma predeterminada, width define el ancho del contenido de la caja (content), sin incluir el relleno ni el borde.
Veamos un ejemplo:
.box {
width: 100px;
padding-left: 20px;
padding-right: 30px;
border: 5px solid black;
}El ancho total de esta caja es 160px: al ancho del contenido se suman el relleno y los bordes, 100px + 20px + 30px + 5px + 5px (un borde a cada lado).
Este comportamiento de width se puede cambiar con box-sizing, como vimos en «Modelo de cajas».
Agregaremos relleno a las columnas para que su contenido no quede pegado a los límites. padding funciona igual en los elementos flex y en las cajas de bloque.
Definiremos un ancho fijo y relleno para las dos columnas: las secciones con las clases bio y photo.
La propiedad height permite definir la altura de una caja, aunque normalmente no se fija la altura de las cajas que organizan la página.
Otra forma de definir el tamaño de un elemento flex es usar flex-basis. Se explica en detalle en el capítulo sobre flexbox en profundidad.
- index.html
- style.css
Ha ido a otra página
Haga clic dentro del mininavegador para poner el foco en esta ventana.
- Crea una regla para la clase
bioy define un ancho de270px. - Crea una regla para la clase
photoy define un ancho de200px. - Agrega
10pxde relleno a todos los lados en ambas reglas.