3

Los elementos inline no pueden tener un width y height definido pero en un flex-container si defino un height,padding y margin a un elemento inline estos son si aplicados.

Se puede condiderar a un flex-item como un tipo de caja en el que el padding,margin,width,height y border de los elementos son respetados?

Cuando digo que si se pueden considerar un tipo de caja me refiero a que si flex-item podría considerarse como si fuese un valor de display solo que definido por el container y no de forma autónoma

.flex-container{
  height: 200px;
  background: pink;
  display: flex;
}
.flex-item{
  background-color: blue;
  padding: 50px;
  color: white;
}

.flex-item:nth-child(2){
  background-color: orange;
  width: 500px;
  padding: 100px;
}
<div class="flex-container">
  <span class="flex-item">1</span>
  <span class="flex-item">2</span>
</div>

1

1 respuesta 1

2

Todos los display entran dentro de la categoría de modo de diseño (modelo de diseño o simplemente layout), por lo que todos ellos tratan lo mismo:

La posición y tamaño de cajas basado en la forma en la que interactúan con sus (elementos) hermanos y padres.

Existen los siguientes:

  • El block layout, diseñado para presentar documentos. El block layout contiene características de documento-centrado, como la capacidad de flotar(float) elementos o distribuirlos en múltiples columnas.
  • El inline layout, diseñado para presentar texto.
  • El table layout, diseñado para presentar tablas.
  • El positioned layout, diseñado para posicionar elementos sin demasiada interacción con otros elementos.
  • El flexible box layout, diseñado para presentar páginas complejas que pueden redimensionarse de forma fluida.
  • El grid layout, diseñado para presentar elementos relativos a una cuadrícula fija (fixed grid).

Referencias: Cajas flexibles, modo de diseño

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.