La diferencia entre displayinlineblock y diseño flexible

Pantalla: existen diferencias obvias entre el diseño de bloques en línea y flexible en términos de disposición de elementos, alineación, asignación de espacio y ajuste de orden.

1. Disposición de los elementos: visualización: los elementos del bloque en línea se mostrarán en la misma línea y no se ajustarán hasta el final de la línea. Por el contrario, los elementos secundarios del diseño flexible están organizados a lo largo del eje principal (horizontal por defecto) de forma predeterminada. Cuando el espacio del eje principal es insuficiente, pasarán automáticamente a la siguiente línea.

2. Alineación: visualización: los elementos del bloque en línea están alineados de acuerdo con la línea base de forma predeterminada, y el diseño flexible proporciona métodos de alineación enriquecidos. Por ejemplo, el eje principal y la cruz se pueden configurar respectivamente mediante la justificación. atributos de contenido y alineación de elementos. Alineación en un eje (el eje perpendicular al eje principal).

3. Asignación de espacio: visualización: la asignación de espacio entre elementos de bloque en línea depende del ancho y los márgenes de los elementos y otros atributos. El diseño flexible puede asignar espacio de manera flexible a través de las propiedades flex-grow y flex-shrink, de modo que los elementos secundarios puedan cambiar de tamaño automáticamente de acuerdo con el tamaño del contenedor principal.

4. Ajuste de secuencia: en el diseño flexible, el orden de los subelementos se puede ajustar a través del atributo de orden, mientras que en la visualización: diseño de bloque en línea, el orden de los elementos es fijo y no se puede ajustar.