greatbody
/
freeCodeCamp
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
freeCodeCamp/guide/spanish/css/layout/flexbox/index.md

2.8 KiB
Raw Blame History

title localeTitle
Flexbox Flexbox

Flexbox

Flexbox es una nueva forma de estructurar contenido en CSS3. Proporciona una manera maravillosa de crear sitios web receptivos que funcionan bien en diferentes tamaños de pantalla y contenido de pedidos.

Hay 3 pasos simples para usar flexbox.

  1. Convierta el contenedor principal en un contenedor flexible utilizando display: flex; en la sección css
  2. Ajustar la disposición de diferentes contenedores utilizando la dirección flexible.
  3. Ajuste los elementos individuales utilizando propiedades como justify-content, align-items, etc.

Flexbox Layout tiene como objetivo proporcionar una manera más eficiente de diseñar, alinear y distribuir el espacio entre los elementos en un contenedor, incluso cuando su tamaño es desconocido y / o dinámico (por lo tanto, la palabra "flex"). La idea principal detrás de la disposición flex es darle al contenedor la capacidad de alterar el ancho / alto (y el orden) de sus artículos para llenar mejor el espacio disponible. uso flexible

  • eje principal : el eje principal de un contenedor flexible es el eje principal a lo largo del cual se disponen los elementos flexibles. Cuidado, no es necesariamente horizontal; depende de la propiedad de dirección de flexión (ver más abajo).
  • inicio principal | main-end Los elementos flexibles se colocan dentro del contenedor comenzando desde main-start hasta el main-end. :* tamaño principal : el ancho o la altura de un elemento flexible, lo que esté en la dimensión principal, es el tamaño principal del elemento. La propiedad de tamaño principal del elemento flexible es la propiedad 'ancho' o 'altura', lo que esté en la dimensión principal.
  • eje transversal : el eje perpendicular al eje principal se denomina eje transversal. Su dirección depende de la dirección del eje principal.
  • inicio cruzado cruce : las líneas flexibles se llenan con elementos y se colocan en el contenedor comenzando en el lado de inicio cruzado del contenedor flexible y dirigiéndose hacia el lado de cruce.
  • tamaño de la cruz : el ancho o la altura de un elemento flexible, cualquiera que esté en la dimensión transversal, es el tamaño de la cruz del elemento. La propiedad de tamaño de cruz es cualquiera de 'ancho' o 'altura' que se encuentra en la dimensión transversal.

Más información:

Este es un gran artículo para leer y entender más sobre flexbox. Esta es una guía práctica altamente recomendada que ilustra las diferentes propiedades de flexión aplicadas al contenedor de flexión y a los elementos de flexión: https://css-tricks.com/snippets/css/a-guide-to-flexbox/