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>