• Publicar

Diseño responsivo con CSS Flexbox

5159
2
2025-02-22 14:46:44
Prohibida la reproducción sin autorización del autor
335
50
455
20
CSS Responsive Layout响应式布局，使用Flex布局的flex-wrap、flex-basis实现 。 demo: <style> .container { display: flex; flex-wrap: wrap; gap: 8px; } .item { flex-grow: 1; flex-basis: 200px; height: 50px; background: gray; } </style> <section class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </section>
Diseño flexible
Frontend
Responsivo
Diseño flexible
智步DataV Enviar mensaje
Web全栈开发可视化教程【开发、学习、分享】
Explicación animada de los puntos clave de CSS
（18/80）
93,4K reproducciones
Resumen
CSS Box-Sizing controla cómo se calcula el modelo de caja de un elemento.
00:15
La propiedad CSS display establece cómo se presenta un elemento
00:15
Reglas de orden de apilamiento de elementos CSS
00:24
CSS Flex Order: configurar el orden de los elementos del diseño flexible
00:10
CSS Align-Self: configurar la alineación individual de elementos
00:17
CSS Flex flex-shrink proporción de reducción de elementos de diseño flexible
00:34
Alineación de varias columnas de CSS Flex Align-Content en el eje transversal
00:29
CSS Flex Align-Content: Alineación de múltiples líneas en el eje transversal
00:27
CSS Flex Justify Content: Alineación del Eje Vertical
00:21
CSS justify-content define la alineación del eje principal del elemento
00:19
CSS Flex-Direction: dirección de alineación de elementos
00:19
CSS Flex align-items controla la alineación del eje principal de los elementos flexibles
00:19
CSS Flex: align-items configura la alineación de los elementos en el eje transversal
00:21
CSS Flex configura el ajuste de línea en diseños flexibles.
00:14
CSS Flex-Basis: espacio ocupado por el elemento en el eje principal de un diseño flexible
00:12
La propiedad flex-grow del diseño flexible define la relación de escala de los elementos
00:15
Diseño Responsivo CSS Responsive Layout
00:14
Diseño responsivo con CSS Flexbox
00:25
Conceptos básicos del diseño flexible de CSS Flex
00:16
Función de propiedad de cálculo dinámico CSS Calc()
00:20
CSS Position fixed fija un elemento a la ubicación especificada
00:15
Propiedad CSS border-radius para redondear las esquinas de los bordes de los elementos
00:14
Conceptos básicos del modelo de caja CSS
00:17
La propiedad CSS opacity especifica la opacidad de un elemento.
00:09
CSS text-shadow para añadir sombras al texto
00:18
La propiedad box-shadow de CSS se utiliza para agregar efectos de sombra en el marco de un elemento.
00:19
Efecto de rotación de elementos con CSS3 transform-rotate
00:17
Cómo centrar div horizontal y verticalmente rápidamente con CSS flex
00:12
CSS: Cómo usar la propiedad z-index para establecer el orden del eje Z de elementos posicionados y sus descendientes, o elementos flex
00:14
CSS Overflow, el contenido excede el tamaño especificado
00:39
Una vez para que recuerdes qué es el posicionamiento fijo CSS
00:15
Una vez para que entiendas la diferencia entre padding y margin
00:13
Diferencia entre CSS Display y Visibility
00:13
Diferencias entre posicionamiento fijo (fixed) y posicionamiento pegajoso (sticky) en CSS
00:20
CSS Gradient define efectos de degradado de color
00:48
CSS Margin: configuración de propiedades de margen externo del elemento
00:38
Propiedad CSS Float para configurar el efecto de envoltura de texto
00:17
CSS Transition define efectos de transición entre diferentes estados de un elemento
00:16
Propiedad CSS Max-Width: establece el ancho máximo de un elemento
00:10
CSS Flex Gap establece el espacio entre filas y columnas
00:17
Variables CSS: Definición y uso de variables
00:15
CSS line-height: Introducción a los principios básicos
00:13
Configuración de alineación vertical de elementos en línea CSS vertical-align
00:33
La palabra clave inicial de CSS restablece el valor inicial predeterminado del atributo
00:12
La palabra clave CSS Inherit fuerza a las propiedades a heredar los valores del elemento padre.
00:15
CSS: La palabra clave Unset para restablecer los valores de las propiedades
00:22
CSS currentColor representa el valor de la propiedad color del elemento actual
00:16
Colapso de Márgenes de Hermanos CSS (Margin Collapse)
00:14
CSS Plegado de margen de bordes exteriores de elementos padre e hijo (Margin Collapse)
00:19
Colapso de márgenes en elementos de bloque CSS vacíos
00:19
Bloque contenedor de elementos de posicionamiento estático
00:14
Bloque contenedor de CSS de elementos estáticos
00:22
El elemento Absolute contiene el bloque de contención (Containing Block)
00:12
Conceptos básicos del contexto de formato de bloque CSS (BFC)
00:16
CSS utiliza BFC para resolver el colapso de la altura del elemento padre
00:16
Resolver la fusión de márgenes externos entre elementos padre-hijo y hermanos a través de BFC
00:15
Introducción al modelo de color RGB
00:13
Introducción al modelo de color hexadecimal Hex del espacio de color RGB
00:20
Introducción al modelo de color HSL del espacio de color RGB
00:22
Introducción al modelo de color HWB en el espacio de color RGB
00:22
Conceptos básicos del diseño de cuadrícula CSS
00:13
grid-template-columns define el tamaño de las pistas de la cuadrícula
00:17
Diseño de cuadrícula grid-template-rows que define el tamaño de las pistas de fila
00:30
Propiedad grid-auto-flow en diseño de cuadrícula para gestionar la ubicación de elementos
00:41
Descripción general de Flexbox
00:14
8 métodos de centrado en CSS
00:11
8 métodos para centrar verticalmente en CSS
00:10
6 métodos para ocultar elementos en CSS
00:27
Análisis del principio de las unidades CSS
02:11
Conversión de unidades CSS
00:10
Descripción general de la cuadrícula CSS Grid
00:13
6 métodos para limpiar flotadores CSS
00:09
Estilos de texto CSS básicos
00:11
Estilos de decoración de texto CSS
00:08
Animación básica CSS keyframes
00:11
Transición de animación CSS.
00:15
Prioridad del selector CSS
00:09
Algoritmo de prioridad de selectores CSS
00:07
Selectores combinados CSS
00:11
Detalles del selector CSS
02:58

Principio de renderizado del navegador
智步DataV
16K 4

Selección de tamaño y proporción de monitor
智步DataV
7500 0

Introducción a las funciones de JavaScript
智步DataV
3334 0

Análisis del principio de las unidades CSS
智步DataV
8321 0

Instalación y ejecución de Docker
智步DataV
10,5K 4

El arte del intercambio de datos JSON
智步DataV
29,1K 6

Introducción a la contenedorización con Docker
智步DataV
2432 2

Introducción a las redes de Docker
智步DataV
3650 3

Detalles de las ramas de Git
智步DataV
42,5K 32

Introducción a los conceptos clave de Docker
智步DataV
3412 2

Conflictos y resolución de fusiones en Git
智步DataV
11,2K 1

Configuración del servicio Docker Compose y gestión de dependencias
智步DataV
1732 0

Introducción detallada a XML
智步DataV
19,7K 6

Flujo de trabajo colaborativo del equipo de Git
智步DataV
10,3K 2

Demostración de comandos básicos de Docker
智步DataV
3595 0

Introducción detallada a las imágenes y repositorios de Docker
智步DataV
2635 1

Introducción a Nginx
智步DataV
6671 0

Ámbito Global y Local de JavaScript
智步DataV
1461 0

Demostración de la operación de reversión de Git
智步DataV
12,4K 3

Comparación de tres operaciones de reversión de Git
智步DataV
18K 7
Expandir
谁是下一个鬼畜新星？
Servicio al cliente
Arriba
赛事库 课堂 2021拜年纪