La propiedad de visualización especifica cómo se debe mostrar un elemento en una página web. Puede haber muchos valores relacionados con esta propiedad en CSS. Inline-block e inline-flex son dos de esas propiedades. Aunque hay varios valores que puede tener esta propiedad, para entender lo anterior, veamos primero otros tres valores: inline, block, flex.
- En línea: tal como sugiere el nombre, en línea muestra un elemento en la misma línea que el resto. Especificar las propiedades de alto y ancho no servirá de nada, ya que sigue el alto y el ancho de la línea, de la que forma parte.
- Bloque: muestra un elemento como un elemento de bloque. Comienza en una nueva línea y ocupa tanto espacio horizontal como sea posible. Los elementos a nivel de bloque no aparecen en la misma línea, sino que rompen la línea existente y aparecen en la línea siguiente.
- Flex: Flex muestra un elemento como una estructura flexible. Para usar la pantalla flexible, se debe crear un contenedor de nivel flexible. El contenedor de nivel flexible no es más que un elemento con la propiedad de visualización establecida en flex. El contenedor flexible en sí se muestra en una nueva línea, al igual que el elemento de bloque. El contenedor flexible puede contener otros elementos y, por lo tanto, el contenedor flexible es el elemento principal y los elementos que forman parte de él son los elementos secundarios. La propiedad Display Flex nos ayuda a alinear y distribuir el espacio entre los elementos de un contenedor, incluso cuando su tamaño es desconocido y/o dinámico.
Bloque en línea: muestra un elemento como un contenedor de bloque de nivel en línea. Un elemento configurado en bloque en línea es muy similar a en línea en el sentido de que se configurará en línea con el flujo natural del texto, es decir; a diferencia de display: block, display:inline-block no agrega un salto de línea después del elemento. Entonces, el elemento puede sentarse junto a otros elementos. El elemento en sí está formateado como un elemento en línea, pero le permite establecer un ancho y alto en el elemento, lo que no es posible en la pantalla: en línea .
Ejemplo:
html
<!DOCTYPE html>
<html>
<title>CSS inline-block</title>
<style>
body {
text-align: center;
font-size: 28px;
}
h1 {
color: green;
}
</style>
<body>
<h1>GeeksforGeeks</h1> A Online
<div style="display:inline-block; background-color:yellow; width:auto; height:auto">
<div style="display:inline; background-color:purple;">Computer</div>
<div style="display:inline; background-color:orange;">Science</div>
<div style="display:inline; background-color:cyan;">Portal</div>
</div>
for Geeks</body>
</html>
Producción:
Inline-flex: muestra un elemento como un contenedor flexible de nivel en línea. El display:inline-flex no hace que los elementos flexibles se muestren en línea. Hace que el contenedor flexible se muestre en línea. La principal diferencia entre display: flex y display: inline-flex es que display: inline-flex hará que el contenedor flexible sea un elemento en línea mientras su contenido mantiene sus propiedades de caja flexible. En la imagen de abajo, el contenedor flexible comprende Informática, Ciencias, Portal y el área amarilla.
Ejemplo:
html
<!DOCTYPE html>
<html>
<title>CSS inline-block</title>
<style>
body {
text-align: center;
font-size: 28px;
}
h1 {
color: green;
}
</style>
<body>
<h1>GeeksforGeeks</h1> A Online
<div style="display:inline-flex; background-color:yellow; width:auto; height:auto">
<div style="display:inline; background-color:purple;">Computer</div>
<div style="display:inline; background-color:orange;">Science</div>
<div style="display:inline; background-color:cyan;">Portal</div>
</div>
for Geeks</body>
</html>
Producción:
Solo hay una diferencia principal entre inline-block e inline-flex :
inline-block: cree un bloque específico para cada elemento en su sección, mantenga la estructura de cada elemento.
inline-flex: No reserva ningún espacio específico en forma normal.
CSS es la base de las páginas web, se usa para el desarrollo de páginas web mediante el diseño de sitios web y aplicaciones web. Puede aprender CSS desde cero siguiendo este tutorial de CSS y ejemplos de CSS .
Publicación traducida automáticamente
Artículo escrito por rosemarybenny2000 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA