0% encontró este documento útil (0 votos)
37 vistas1 página

FLEXBOX

Flexbox permite posicionar elementos de forma flexible dentro de un contenedor. Define dos ejes, principal y secundario, y propiedades como flex-direction, flex-wrap, y align-items controlan cómo se distribuyen los elementos a lo largo de los ejes. flex-grow, flex-shrink y flex-basis controlan cómo se ajustan los elementos cuando el espacio disponible cambia. justify-content alinea los elementos a lo largo del eje principal.

Cargado por

Eduardo Herrera
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Descargar como docx, pdf o txt
0% encontró este documento útil (0 votos)
37 vistas1 página

FLEXBOX

Flexbox permite posicionar elementos de forma flexible dentro de un contenedor. Define dos ejes, principal y secundario, y propiedades como flex-direction, flex-wrap, y align-items controlan cómo se distribuyen los elementos a lo largo de los ejes. flex-grow, flex-shrink y flex-basis controlan cómo se ajustan los elementos cuando el espacio disponible cambia. justify-content alinea los elementos a lo largo del eje principal.

Cargado por

Eduardo Herrera
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Descargar como docx, pdf o txt
Descargar como docx, pdf o txt
Está en la página 1/ 1

FLEXBOX El primer valor especificado 

es flex-direction y el es stretch razón por la cual los ítems


segundo valor es flex-wrap se ajustan por defecto a la altura de
Trabaja con dos ejes aquel más alto. En efecto se ajustan para
llenar el contenedor flex — el ítem más alto
 Eje principal: es el eje horizontal En el contenedor flex, La propiedad flex-basis es define la altura de este. En cambio
 Eje secundario: Es el eje vertical definida como auto. definimos align-items como flex-start para
que los ítems se alineen al comienzo del
Flexbox trabaja con un padre y con un hijo. Por  flex-basis especifíca la base flexible, la cual contenedor flex, flex-end para alinearlos al
lo tanto se le debe posicionar el display: flex al es el tamaño inicial de un elemento flexible. final, o center para alinearlos al centro.
padre y este afectara a los hijos. Ésta propiedad determina el tamaño de una  justify-content es usada para alinear los
Siempre debe tener definido el width y el height caja de contenidos a no ser que se haya ítems en el eje principal, cuyo flex-
el padre, porque si no están definidos, no se especificado de otra forma usando box- direction define la dirección del flujo. El valor
sizing. inicial es flex-start que alineará los ítems al
pueden utilizar algunas propiedades. (Para
inicio del margen del contenedor, pero
trabajar con el eje principal “horizontal” siempre
 flex-wrap es definida como nowrap. también se podría definir como flex-end para
se debe colocar el width. Y si se va a trabajar alinearlos al final, o center para alinearlos al
con el eje secundario “vertical” siempre se debe especifica si los elementos "hijos" son
centro. También podemos usar space-
colocar el height). También se debe procurar obligados a permanecer en una misma línea
between para tomar todo el espacio
colocarle un height a los hijos, a menos que se o pueden fluir en varias líneas. Si la
sobrante después de que los ítems hayan
quiera trabajar con el 100%. cobertura (wrap) está permitida, esta sido colocados, y distribuir de forma
propiedad también te permite controlar la pareja los ítems para que haya un espacio
flex-direction especifica cómo colocar los dirección en la cual serán apilados los equitativo entre cada ítem. O bien, usamos
objetos flexibles en el elementos. el valor space-around para crear un espacio
contenedor flexible definiendo el eje principal y la Nowrap: Los elementos flex son distribuidos equitativo a la derecha e izquierda de cada
dirección (normal o al revés). en una sola línea, lo cual puede llevar a que ítem. space-evenly: los elementos se
se desborde el contenedor flex distribuyen de modo que el espacio entre
Wrap: Los elementos flex son colocados en dos sujetos de alineación adyacentes, antes
 flex-direction: row; Posicionar en filas. varias líneas. del primer sujeto de alineación y después
 flex-direction: row-reverse; Posicionar del último sujeto de alineación sea el mismo
en fila pero al revés.  flex-grow de CSS especifica el factor de
 flex-direction: column; Posicionar en crecimiento de un elemento flexible (que
columnas. tiene asignado display:flex), en su dirección
 flex-direction: column-reverse; principal. El factor de crecimiento especifica
Posicionar columnas al revés. qué cantidad del espacio restante dentro del
contenedor flexible, debería ocupar el item
Un área del documento que contiene un flexbox en cuestión. La dirección principal puede ser
es llamada contendedor flex. Para crear un la altura o el ancho del elemento,
contenedor flex, establecemos la propiedad del dependiendo del valor de flex-direction. 
área del contenedor display como flex o inline-  flex-shrink especifica el factor de
flex. Tan pronto como hacemos esto, los hijos contracción de un flex item. Los flex items se
directos de este contenedor se vuelven ítems encogerán para llenar el contenedor de
flex.  acuerdo a su número flex-shrink , cuando el
tamaño por defecto de los flex items sea
Se pueden combinar las propiedades flex- mayor al de su contenedor flex container.
direction y flex-wrap en la abreviatura flex-flow .  align-items alineará los ítems sobre el eje
cruzado. El valor inicial para esta propiedad

También podría gustarte