Para las personas familiarizadas con los diseños flotantes, la apariencia

predeterminada que se crea simplemente agregando estos monitor values es

similar a establecer el ancho de un contenedor al 100% y flotarlo y todos sus
elementos secundarios a la izquierda, o usar la extensión.clearfix método, pero
mejor. Los niños todavía caben en una sola línea, incluso si se han envuelto si
realmente flotaron. Y, así como los elementos flotantes son al menos tan altos como
sus hijos flotantes más altos, el contenedor será lo suficientemente alto como para
abarcar a sus hijos.

El flexión en línea value hace que el contenedor flexible se comporte como un elemento de nivel en línea. Será
solo tan ancho como sea necesario, como se declare, o tan ancho como una columna siflexdirection se
establece en columnadefinido a continuación). Como otros elementos de nivel en línea, el
flexión en línea El contenedor se sienta junto en una línea con otros elementos de nivel en línea, y se ve
afectado por la altura de la línea y la alineación vertical, lo que crea espacio para los descendentes
debajo de la caja de forma predeterminada. Elflexionar valor de la monitor La propiedad se comporta
como un elemento de bloque.

Hemos agregado relleno, márgenes y bordes al contenedor flexible y a los

elementos para mejorar la apariencia de las figuras y para una mejor
legibilidad de las figuras. Las propiedades del modelo de caja afectan el diseño
flexible. Si no hubiéramos incluido estas propiedades, todos los elementos
flexibles estarían agrupados contra el contenedor flexible y entre sí y serían
indistinguibles entre sí. Las explicaciones de la ilustración no abordarán los
efectos de las propiedades del modelo de caja hasta que comencemos a cubrir
algunos de los efectos del diseño del modelo de caja en"El alinear contenido
Propiedad ”en la página 54.

Si queremos crear una barra de navegación a partir de un grupo de enlaces, es muy sencillo. Simplemente
pantalla: flex ;:
nav {
monitor: flexionar;
}

<nav>
<a href="/">Casa</a> <a href="/acerca
de">Acerca de</a> <a href="/Blog">Blog
</a> <a href="/trabajos">Carreras</a> <a
href="/contacto">Contáctenos</a> </nav
>

En el código anterior, con su monitor propiedad establecida en flexionar, el <nav> se convierte en un contenedor
flexible, y sus enlaces secundarios son todos elementos flexibles. Estos enlaces son cuadros de nivel flexible,
semánticamente todavía enlaces, pero ahora elementos flexibles en su presentación. No están en línea

Aprendizaje de Flexbox | 11
cajas de nivel: más bien, participan en el contexto de formato flexible de su contenedor. Por tanto, el
espacio en blanco se ignora:

nav {
monitor: flexionar; borde inferior:
1 px sólido #ccc;
}
a{
margen: 0 5px; relleno: 5px
15px; radio de borde: 3px 3px 0
0; color de fondo: # ddaa00;
decoración de texto: ninguna;
color: #ffffff;

}
a:flotar, a:enfocar, a:activo {
color de fondo: # ffcc22;
color: negro;
}
Con un poco de CSS agregado, tenemos una barra de navegación con pestañas simple, como se muestra en
Figura 1-7.

Figura 1-7. Una navegación con pestañas simple

Un contexto de formato flexible es similar a un contexto de formato de bloque, excepto que se usa un diseño
flexible en lugar de un diseño de bloque: los flotadores no se entrometen en el contenedor flexible y los
márgenes del contenedor flexible no colapsan con los márgenes de su contenido.

Si bien existen similitudes, los contenedores flexibles son diferentes de los contenedores de bloques.
Algunas propiedades de CSS no se aplican en el contexto flexible. Elcolumna-* propiedades, ::primera
linea y ::primera letra no aplique cuando se trata del contenedor flexible.

El ::primera linea y ::primera letra los pseudoelementos seleccionan la primera línea y

la primera letra de los elementos de nivel de bloque, respectivamente.

12 | Capítulo 1: Flexbox
 CAPITULO 2

Contenedor flexible

La primera noción importante que hay que comprender plenamente es la de contenedor flexible, también
conocido como caja contenedor. El elemento en el quepantalla: flex o pantalla: inline-flex se aplica se convierte
en un contexto de formato flexible para los elementos secundarios del cuadro contenedor, conocido como
contenedor flexible. Una vez que hemos creado un contenedor flexible (agregando un pantalla: flex
o pantalla: inline-flex), necesitamos aprender a manipular el diseño de los elementos secundarios
del contenedor.

Los hijos de esta caja contenedora son artículos flexibles, ya sean nodos DOM, nodos de texto o contenido
generado. Los elementos secundarios absolutamente posicionados de los contenedores flexibles también
son elementos flexibles, pero tienen el tamaño y la posición como si fueran el único elemento flexible en el
contenedor flexible.

Primero aprenderemos todo sobre las propiedades CSS que se aplican al contenedor flexible, incluidas varias
propiedades que afectan el diseño de los elementos flexibles. Los elementos flexibles en sí mismos son un
concepto importante que necesita asimilar y se tratarán en su totalidad enCapítulo 3.

Propiedades del contenedor flexible

El monitor ejemplos de propiedades en Figura 1-6 muestre tres elementos flexibles uno al lado del
otro, de izquierda a derecha, en una línea. Con algunas declaraciones adicionales de valor de
propiedad, podríamos haber centrado los elementos, alineado con la parte inferior del contenedor,
reorganizado su orden de aparición y dispuesto de izquierda a derecha o de arriba a abajo. Incluso
podríamos haberlos hecho abarcar algunas líneas.

A veces tendremos un artículo flexible, a veces tendremos docenas. A veces, sabremos

cuántos hijos tendrá un nodo. A veces, el número de niños no estará bajo nuestro control.
Podríamos tener una cantidad variada de elementos en un contenedor de ancho fijo. Es
posible que sepamos la cantidad de artículos, pero no el ancho del recipiente. Deberíamos
tener CSS robusto que pueda manejar nuestros diseños cuando no lo sepamos

13
cuántos elementos flexibles tendremos o qué tan ancho será el contenedor flexible (piense en
respuesta). Hay varias propiedades fuera del nuevomonitor valores que podemos agregar al
contenedor flexible para proporcionar control sobre el diseño que nos permite crear diseños
receptivos y widgets receptivos.

El pantalla, dirección flexible, envoltura flexible, y flujo flexible las propiedades impactan el
pedido y orientación del contenedor flexible. Eljustificar-contenido, alinear-elementos, y alinear
contenido Las propiedades se pueden aplicar al contenedor flexible para afectar la alineación de los
elementos secundarios del contenedor.

El flujo flexible Propiedad de taquigrafía

El flujo flexible La propiedad le permite definir las direcciones de los ejes principal y transversal y si los
elementos flexibles pueden ajustarse a más de una línea si es necesario.

flujo flexible

Valores: <dirección-flex> || <flex-wrap>

Valor inicial: fila nowrap
Se aplica a: Contenedores flexibles

Heredado: No
Porcentajes: No aplica
Animable: No

El flujo flexible propiedad abreviada establece el dirección flexible y envoltura flexible propiedades para
definir la envoltura del contenedor flexible y los ejes principal y transversal.

El valor predeterminado de dirección flexible es hilera. El valor predeterminado de envoltura flexible es ahora
rap. Siempre y cuando monitor se establece en flexionar o flexión en línea, omitiendo flujo flexible, flexible

dirección, y envoltura flexible es lo mismo que declarar cualquiera de los siguientes tres,
que significan lo mismo:

flujo flexible: hilera; flujo

flexible: Nowrap; flujo
flexible: hilera Nowrap;

En los modos de escritura de izquierda a derecha, declarar cualquiera de los valores de propiedad que se
acaban de enumerar u omitir el flujo flexible propiedad en conjunto creará un contenedor flexible con un eje
principal horizontal que no se envuelve, como se muestra en Figura 2-1. Ese no es el look que buscas.flujo
flexible poder ayudar. Pero es posible que se pregunte por qué estamos introduciendo una propiedad
abreviada antes de comprender las propiedades del componente.

14 | Capítulo 2: Contenedor flexible

Figura 2-1. flujo flexible: fila;

Si bien los autores de la especificación fomentan el uso de la flujo flexible taquigrafía,

comprensión envoltura flexible y dirección flexible, las dos propiedades que componen esta
taquigrafía, es necesaria. Y, al conocer los valores que componen elflexflow abreviadamente,
aprenderemos cómo arreglar el diseño antiestético que se muestra en Figura 2-1.

El dirección flexible Propiedad

Si desea que su diseño vaya de arriba a abajo, de izquierda a derecha, de derecha a izquierda o incluso de
abajo hacia arriba, puede usar dirección flexible para controlar el eje principal a lo largo del cual se colocan los
elementos flexibles.

dirección flexible

Valores: fila | reversa de fila | columna | fila de columna

Valor inicial: inversa

Se aplica a: Contenedores flexibles

Heredado: No
Porcentajes: No aplica
Animable: No

El dirección flexible La propiedad especifica cómo se colocan los elementos flexibles en el contenedor flexible.
Define el eje principal de un contenedor flexible (ver“Comprensión de los ejes” en la página 25), que es el eje
principal a lo largo del cual se colocan los elementos flexibles.

Figura 2-2 muestra los cuatro valores de dirección flexible, incluso fila, reversa de fila, columna, y columna
inversa en idiomas de izquierda a derecha. Tenga en cuenta que todas las propiedades flexibles
discutidas aquí, como todas las propiedades CSS, aceptan los valores globales deheredar, inicial,
y desarmado.

Propiedades del contenedor flexible | 15

Figura 2-2. Los cuatro valores de la propiedad flex-direction cuando el idioma es de izquierda a derecha

Especificamos idiomas de izquierda a derecha, porque la dirección del eje principal para hilera- la
dirección en la que se colocan los elementos flexibles, es la dirección del modo de escritura actual.

Preferiblemente, deberíamos haber usado el flujo flexible propiedad taquigráfica. Las dos
columnas de la derecha enTabla 2-1 son equivalentes, y el valor de nowrap se explica en la
siguiente sección.

Tabla 2-1. Los valores para los equivalentes de dirección flexible y flujo flexible

dirección flexible valor único flujo flexible flujo flexible

hilera hilera fila ahora

reversa reversa fila-reverso nowrap
columna columna columna ahora
columna inversa columna inversa Columna inversa nowrap

16 | Capítulo 2: Contenedor flexible

 Idiomas de derecha a izquierda

Si está creando sitios web en inglés u otro idioma de izquierda a derecha (LTR), es probable que
desee que los elementos flexibles se distribuyan de izquierda a derecha y de arriba a abajo. Por
defecto o configuraciónhilera lo haré. Si escribe en árabe u otro idioma de derecha a izquierda, es
probable que desee que los elementos flexibles se distribuyan de derecha a izquierda (RTL) y de
arriba a abajo. Incumplir o configurarhilera también lo hará por ti.

dirección flexible: fila colocará los elementos flexibles en la misma dirección que la dirección del
texto, también conocida como modo de escritura, ya sea un lenguaje RTL o LTR. Si bien la mayoría
de los sitios web se presentan en idiomas de izquierda a derecha, algunos sitios están en idiomas
de derecha a izquierda y otros están de arriba a abajo. Con flexbox, puede incluir un solo diseño.
Cuando cambia el modo de escritura, flexbox se encarga de cambiar la dirección de flexión por
usted.

El modo de escritura lo establece el modo de escritura, dirección, y orientación del texto

propiedades o el dir atributo en HTML. Cuando el modo de escritura es correcto o izquierdo, ya
sea que esté configurado en HTML con eldir = "rtl" par atributo / valor o vía CSS con dirección: rtl; -
la dirección del eje principal, y por lo tanto los elementos flexibles dentro del contenedor flexible,
irán de derecha a izquierda por defecto o cuando el dirección flexible: fila se establece
explícitamente.

Puede invertir esta dirección predeterminada con flex-direction: fila-reversa.

Los elementos flexibles se colocarán de arriba a abajo cuando dirección flexible: columna está
configurado, y de abajo hacia arriba si dirección flexible: columna inversa está configurado, como se
muestra en Figura 2-2. Tenga en cuenta si el CSSdirección el valor es diferente del dir valor de atributo
en un elemento, el valor de la propiedad CSS tiene prioridad sobre el atributo HTML.

No utilice dirección flexible para cambiar el diseño de los idiomas de

derecha a izquierda. Más bien, use eldir atributo, o el modo de escritura
Propiedad CSS, que permite cambiar entre horizontal y vertical, para
indicar la dirección del idioma.

En los modos de escritura horizontal, que incluye idiomas de izquierda a derecha y de derecha a izquierda,
ajuste flex-direction: row, flex-flow: row, flex-flow: row nowrap, u omitir
ting las propiedades de taquigrafía y taquigrafía por lo que por defecto es hilera colocará todos los elementos
flexibles horizontalmente, de lado a lado. De forma predeterminada, todos se alinearán horizontalmente, a lo
largo de la línea del eje principal, en el orden de origen. En los idiomas de izquierda a derecha, se alinearán
de izquierda a derecha: se hace referencia al lado izquierdoinicio principal y la derecha es mantener, para los
puntos inicial y final del eje principal. En idiomas de derecha a izquierda, la principal

Propiedades del contenedor flexible | 17

la dirección está invertida: los elementos flexibles están uno al lado del otro de derecha a izquierda, con el eje
principal yendo de izquierda a derecha, el lado derecho es el inicio principal y el izquierdo es el final principal.

El reversa el valor es el mismo que hilera, excepto que los elementos flexibles se colocan en la
dirección opuesta a la dirección del texto: los puntos inicial y final están invertidos. La dirección
del eje principal del contenedor flexible es invertida por elreversa valor. Para idiomas de
izquierda a derecha, como inglés,reversa colocará todos los elementos flexibles de lado a lado
de derecha a izquierda, horizontalmente, con el inicio principal a la derecha y el extremo
principal ahora a la izquierda. Estos se muestran en los dos ejemplos de imágenes superiores
en Figura 2-2.

¿Se había invertido la dirección de la página o el contenedor flexible, como en hebreo o árabe,
con el atributo dir = "rtl" en el contenedor flexible o un antepasado en el HTML, o con dirección:
rtl en el contenedor flexible o el antepasado del contenedor en el CSS, la dirección del reversa El
eje principal, y por lo tanto los elementos flexibles, se invertirían desde el valor predeterminado,
yendo de izquierda a derecha, como se muestra en Figura 2-3. Del mismo modo, el
modo de escritura La propiedad afecta la dirección en la que se dibujan los elementos flexibles en la
página.

Figura 2-3. Los cuatro valores de la propiedad flex-direction cuando la dirección es de derecha a
izquierda, demostrados aquí conpantalla: inline-flex

18 | Capítulo 2: Contenedor flexible

El columna value colocará los elementos flexibles de arriba a abajo. Elcolumna value establece que el
eje principal del contenedor flexible tenga la misma orientación que el eje del bloque del modo de
escritura actual. Este es el eje vertical en los modos de escritura horizontal y el eje horizontal en los
modos de escritura vertical. Básicamente, establece el eje principal del contenedor flexible en vertical
en la mayoría de los casos.

Hay idiomas escritos verticalmente, incluidos Bopomofo, jeroglíficos egipcios, Hiragana,

Katakana, Han, Hangul, cursiva meroítica y jeroglíficos, mongol, ogham, antiguo turco,
Phags Pa, Yi y, a veces, japonés. Estos idiomas solo son verticales cuando se especifica un
modo de escritura vertical. Si no lo es, todos esos idiomas son horizontales. Si se especifica
un modo de escritura vertical, entonces todo el contenido es vertical, ya sea en uno de los
idiomas de escritura vertical enumerados o incluso en inglés.

El modo de escritura controla la dirección del flujo del bloque: la dirección en la

que se apilan las líneas y los bloques. El valor predeterminado, horizontal-tb, los
apila de arriba a abajo. Los otros valores los apilan de derecha a izquierda o de
izquierda a derecha.

La dirección controla la "dirección base" en línea, la dirección en la que se ordena el

contenido dentro de una línea. LTR, abreviatura de "izquierda a derecha", va de
nominal "izquierda" a nominal "derecha". RTL, abreviatura de "derecha a izquierda",
es lo opuesto. El lado que está nominalmente "izquierdo" a los efectos de la dirección
se ve afectado por el modo de escritura: si el modo de escritura es vertical, ¡el lado
"izquierdo" podría ser el superior!

La dirección de la base en línea es y siempre debe ser una propiedad del

contenido. Utilizar eldir atributo en HTML. No use el CSSdirección propiedad. El
modo de escritura es una preferencia de diseño.1 El chino, el japonés y el
coreano se pueden escribir en cualquier orientación. Si bien el inglés es un
idioma de arriba hacia abajo y de izquierda a derecha, a veces verá e incluso
puede usar la escritura vertical para lograr un efecto estilístico.

Con columna, los elementos flexibles se muestran en el mismo orden en que se declararon en el documento de
origen, pero de arriba a abajo en lugar de de izquierda a derecha, por lo que los elementos flexibles se colocan uno
encima del siguiente en lugar de uno al lado del otro:

nav {
monitor: flexionar; dirección flexible
: columna; borde derecho: 1 px
sólido #ccc;
}
a{
margen: 5px;
relleno: 5px 15px;

1 El diseño horizontal es incorrecto para mongol. Debido a esta excepción, no es realmente una "preferencia".

Propiedades del contenedor flexible | 19

 radio de borde: 3px; color
de fondo: #ccc; decoración
de texto: ninguna; color:
negro;
}
a:flotar, a:enfocar, a:activo {
color de fondo: #aaa;
decoración de texto: subrayar;
}
Usando un marcado similar a nuestro ejemplo de navegación anterior, simplemente cambiando algunas propiedades
de CSS, podemos crear una navegación agradable al estilo de la barra lateral.

Para el nuevo diseño de la navegación, cambiamos el dirección flexible desde el predeterminado hilera
a columna, movió el borde de abajo a la derecha y cambió los colores,
radio de borde, y margen valores, como se ve en Figura 2-4.

Figura 2-4. Cambiar la dirección flexible puede cambiar completamente el diseño de su contenido

Idiomas de arriba a abajo

Para idiomas de arriba a abajo, como japonés, cuando modo de escritura: horizontal-tb está configurado y
admitido, el eje principal se gira 90 grados en el sentido de las agujas del reloj desde el valor predeterminado de
izquierda a derecha, por lo que dirección flexible: fila va de arriba a abajo y dirección flexible: columna procede
de derecha a izquierda, como se muestra en Figura 2-5.

El modo de escritura La propiedad especifica la dirección del flujo del bloque, definiendo si las
líneas de texto se disponen horizontal o verticalmente y la dirección en la que progresan los
bloques. Define la dirección en la que se apilan los contenedores a nivel de bloque y la dirección
en la que fluye el texto y otro contenido a nivel de línea dentro de un contenedor de bloque. Es
apropiado usarmodo de escritura para idiomas de arriba a abajo y para rotar texto. No usemodo de
escritura para anular la dirección simplemente por razones de diseño: en su lugar, use el dirección
flexible propiedad.

20 | Capítulo 2: Contenedor flexible

Figura 2-5. Los cuatro valores de la propiedad de dirección flexible cuandomodo de escritura es
horizontal-tb

El columna inversa el valor es similar a columna, excepto que el eje principal está invertido, con el inicio
principal en la parte inferior y el extremo principal en la parte superior del eje principal vertical, yendo
hacia arriba, como se muestra en el ejemplo de abajo a la derecha en Figura 2-3.

Los valores inversos solo cambian la apariencia. El orden de voz y el orden de tabulación sigue
siendo el mismo que el marcado subyacente.

Lo que hemos aprendido hasta ahora es muy poderoso y hace que el diseño sea muy sencillo. Si incluimos la
navegación dentro de un documento completo, podemos ver lo simple que puede ser el diseño con flex‐ box.

Ampliemos un poco nuestro ejemplo HTML anterior e incluyamos la navegación como un componente
dentro de una página de inicio:

<cuerpo>
<encabezado>

<h1>¡El título de mi página!</h1>

</header>
<nav>
<a href ="/">Casa</a> <a href ="/
acerca de">Acerca de</a> <a href
="/Blog">Blog</a>

Propiedades del contenedor flexible | 21

 <a href ="/trabajos">Carreras</a> <a href
="/contacto">Contáctenos</a> </nav>

<principal>

<artículo>
<img alt ="" src ="img1.jpg">
<p>Este es un contenido increíble que está en la página.</p>
<botón>Ir a algún lugar</button> </article>

<artículo>
<img alt ="" src ="img2.jpg">
<p>Esto es más contenido que el cuadro anterior, pero menos que el
siguiente.</p>
<botón>Haz click en mi</button>
</article>
<artículo>
<img alt ="" src ="img3.jpg">
<p>Tenemos mucho contenido aquí para mostrar que el contenido puede
crecer y que todo puede tener el mismo tamaño si usa flexbox.</p> <botón>
Hacer algo</button> </article>

</main>
<footer>Derechos de autor & #169; 2017</footer>
</body>

Simplemente agregando algunas líneas de CSS, tenemos una página de inicio bien diseñada, como se
muestra en Figura 2-6:

* {
contorno: 1px #ccc sólido;
margen: 10px;
relleno: 10px;
}
cuerpo, nav, principal, artículo {
monitor: flexionar;
}
cuerpo, artículo {
dirección flexible: columna;
}
Solo se necesitaron dos declaraciones de propiedades / valores de CSS para crear el diseño básico para la página de inicio de un

sitio.

Obviamente, hubo algo de CSS adicional. Agregamos borde, margen y relleno a todos los elementos para que
pueda diferenciar los elementos flexibles por el bien del aprendizaje (no pondría este sitio poco atractivo en
producción). De lo contrario, todo lo que hemos hecho es simplemente declarar el cuerpo, la navegación, el
principal y los artículos como contenedores flexibles, haciendo que todos los elementos de navegación,
enlaces, principal, artículo, imágenes, párrafos y botones sean flexibles. Sí, los elementos pueden ser tanto
elementos flexibles como contenedores flexibles, como vemos con la navegación, principal y artículos en este
caso. Elcuerpo y artículoafeitar columna establecer como sus direcciones de flexión, y dejamos nav y principal
predeterminado a hilera. ¡Solo dos líneas de CSS!

22 | Capítulo 2: Contenedor flexible

Figura 2-6. Diseño de la página de inicio usandodirección flexible: fila y columna

Pero, ¿qué sucede cuando los elementos flexibles? dimensión principal (sus anchos combinados para
hilera o alturas combinadas para columna) no cabe dentro del contenedor flexible? Podemos hacer que se
desborden, como se muestra enFigura 2-1, o podemos permitirles que se envuelvan en líneas flexibles
adicionales.

El envoltura flexible Propiedad

Hasta ahora, los ejemplos han mostrado una sola fila o columna de elementos flexibles. Si las dimensiones principales
de los elementos flexibles no encajan todas en el eje principal del contenedor flexible, de forma predeterminada, los
elementos flexibles no se ajustarán. Más bien, los elementos flexibles pueden encogerse si se les permite hacerlo a
través de los elementos flexibles.flexionar propiedad (ver "El flexionar Propiedad ”en la página 70) y / o los elementos
flexibles pueden desbordar el cuadro contenedor delimitador.

Puede controlar este comportamiento. envoltura flexible se puede colocar en el contenedor para permitir que los
elementos flexibles se envuelvan en varias líneas flexibles (filas o columnas de elementos flexibles) en lugar de que los
elementos flexibles se desborden del contenedor o se encojan mientras permanecen en una línea.

El envoltura flexible La propiedad controla si el contenedor flexible se limita a ser un contenedor de una
sola línea o se le permite convertirse en multilínea si es necesario. Cuando elflexwrap La propiedad
está configurada para permitir múltiples líneas flexibles, ya sea que el valor de envoltura o
envolver-revertir is set determina si aparecen líneas adicionales antes o después de la línea
original de elementos flexibles.

Propiedades del contenedor flexible | 23

 envoltura flexible

Valores: nowrap | envolver | envolver-invertir

Valor inicial: ahora

Se aplica a: Contenedores flexibles

Heredado: No
Porcentajes: No aplica
Animable: No

De forma predeterminada, no importa cuántos elementos flexibles haya, todos los elementos flexibles se dibujan en
una sola línea. A menudo, esto no es lo que queremos. Ahí es dondeenvoltura flexible entra en juego. Elenvoltura y
envolver-revertir Los valores permiten que los elementos flexibles se envuelvan en líneas flexibles adicionales cuando
se alcanzan las restricciones del contenedor flexible principal.

Figura 2-7 demuestra los tres valores de la envoltura flexible propiedad cuando el flexdirection el
valor está predeterminado en hilera. Cuando hay dos o más líneas flexibles, la segunda línea y
las líneas flexibles subsiguientes se agregan en la dirección del eje transversal.

Si las líneas flexibles adicionales se agregan arriba o abajo, como en el caso de Figura
2-7, oa la izquierda oa la derecha de la línea anterior se determina por si
envoltura o envolver-revertir está establecido, por el dirección flexible valor, y por el modo de escritura.

Generalmente para envoltura, el eje transversal va de arriba a abajo para hilera y reversa
y la dirección horizontal del idioma para columna y columna inversa. El
envolver-revertir el valor es similar a envoltura, excepto que se agregan líneas adicionales antes de la
línea actual en lugar de después de ella.

Cuando se establece en envolver al revés, la dirección del eje transversal se invierte: líneas siguientes
se dibujan en la parte superior en el caso de dirección flexible: fila y dirección de flexión: fila-
contrarrestar ya la izquierda de la columna anterior en el caso de dirección flexible:
columna y flex-direction: columna-inversa. Del mismo modo, en los idiomas de derecha a izquierda,
flujo flexible: envoltura en reversa de fila y flex-flow: fila-reversa envoltura-reversa, nuevo
También se agregarán líneas en la parte superior, pero para flex-flow: columna envolvente-inversa
y flexflow: columna-reversa envoltura-reversa se agregarán nuevas líneas a la derecha, lo opuesto
a la dirección del idioma o al modo de escritura, la dirección del eje transversal invertido.

24 | Capítulo 2: Contenedor flexible

Figura 2-7. Los tres valores delenvoltura flexible propiedad

Puede notar que en Figura 2-7, las nuevas líneas creadas en el envoltura y envuelto los ejemplos no tienen la
misma altura que la primera línea. Las líneas flexibles son tan altas o anchas como su elemento flexible más
alto o más ancho dentro de esa línea. La dimensión principal de la línea flexible es la dimensión principal del
contenedor flexible, mientras que la dimensión transversal de la línea flexible crece para adaptarse al tamaño
cruzado del elemento flexible con el tamaño cruzado más grande.

Si bien los ejemplos hasta ahora son bastante simples, como puede haber notado en los dos párrafos
anteriores, comprender completamente todas las complejidades de flexbox no lo es. La explicación
anterior introdujo términos posiblemente confusos como eje principal, inicio principal y extremo
principal y eje transversal, inicio transversal y extremo transversal. Para comprender completamente
flexbox y todas las propiedades de flexbox, es importante comprender.

Para comprender el diseño flexible, debe comprender las direcciones físicas, los ejes y los tamaños que
afectan al contenedor flexible y sus elementos flexibles. Comprender completamente lo que significa la
especificación cuando usa estos términos hará que comprender completamente flexbox sea mucho más fácil.

Entendiendo ejes

Los elementos flexibles se colocan a lo largo del eje principal. Las líneas flexibles se agregan en la dirección del eje
transversal. Los términos "principales" tienen que ver con elementos flexibles. Los términos "cruzados" vienen

Propiedades del contenedor flexible | 25

en juego en contenedores flexibles multilínea: cuando envoltura o envolver-revertir está configurado y los elementos
flexibles realmente se ajustan a más de una línea.

Hasta que presentamos envoltura flexible, todos los ejemplos tenían una sola línea de elementos flexibles. Esa
única línea de elementos flexibles implicaba colocar los elementos flexibles a lo largo del eje principal, en la
dirección principal, desde el inicio principal hasta el final principal. Dependiendo deldirección flexible
propiedad, esos elementos flexibles se colocaron uno al lado del otro, de arriba hacia abajo o de abajo hacia
arriba, en una fila o columna a lo largo de la dirección del eje principal.

Tabla 2-2 resume los términos "principal" y "cruzado". Enumera las dimensiones y direcciones
del eje principal y el eje transversal, junto con su punto de inicio, puntos finales y direcciones
para diseños de modo de escritura de izquierda a derecha. Además de describir las dimensiones
y la dirección del contenedor flexible, estos términos pueden usarse para describir la dirección y
dimensión de los artículos flexibles individuales.

Tabla 2-2. Dimensiones y direcciones del eje principal y transversal, junto con su punto de inicio,
puntos finales y direcciones en diseño de izquierda a derecha

Flexione las direcciones en la fila de modos de escritura de izquierda a derecha (LTR)

reversa columna columna inversa

eje principal de izquierda a derecha De derecha a izquierda de arriba hacia abajo abajo hacia arriba

dimensión principal horizontal horizontal vertical vertical

inicio principal izquierda derecho cima fondo

extremo principal derecho izquierda fondo cima

tamaño principal ancho ancho altura altura

dimensión cruzada vertical vertical horizontal horizontal

inicio cruzado cima cima izquierda izquierda

extremo cruzado fondo fondo derecho derecho

tamaño cruzado altura altura ancho ancho

En el caso de flujo flexible: fila (Figura 2-1), la suma de los tamaños principales de la línea no envolvente
de artículos flexibles fue mayor que el tamaño principal del padre del contenedor flexible. En un inglés
más sencillo, los anchos combinados (y los márgenes horizontales no colapsados) de los elementos
flexibles eran más anchos que el ancho del contenedor flexible.

En modos de escritura horizontal, para hilera y fila-reversa, el tamaño principal se refiere al anchos de
los elementos flexibles y el contenedor flexible. En el caso decolumna y columna inversa, el tamaño
principal es la altura.

Figura 2-8 muestra los ejes y la dirección de cada eje para contenedores flexibles con un
dirección flexible de fila, reversa de fila, columna, y columna inversa para escritura LTR
modos.

26 | Capítulo 2: Contenedor flexible

Figura 2-8. Ejes parafila, reversa de fila, columna, y columna inversa en idiomas LTR

El eje principal es el eje principal a lo largo del cual se colocan los elementos flexibles, y los elementos
flexibles se dibujan a lo largo del eje principal en la dirección del inicio principal al final principal.

Propiedades del contenedor flexible | 27

Si todos los modos de escritura fueran de izquierda a derecha y de arriba a abajo, como en
inglés, flexdirection sería menos complejo. Para los lenguajes RTL y LTR,flexionar-
dirección: fila y dirección de flexión: fila-reversa el eje principal es horizontal. Para
Idiomas LTR, en el caso de hilera, el inicio principal está a la izquierda y el final principal está a la derecha.
Están invertidos parafila-reversa, con el inicio principal cambiando a la derecha y el extremo principal ahora a
la izquierda. Paracolumna, el eje principal es vertical, con el inicio principal en la parte superior y el extremo
principal en la parte inferior. Paracolumna inversa, el eje principal también es vertical, pero con el inicio
principal en la parte inferior y el extremo principal en la parte superior.

Como se muestra en Tabla 2-3, cuando el modo de escritura es de derecha a izquierda, como en
árabe y hebreo, si tiene dir = "rtl" establecido en su HTML, o dirección: rtl establecido en su CSS, la
dirección del texto irá de derecha a izquierda. En estos casos, la dirección de
hilera se invierte para ser de derecha a izquierda con el inicio principal a la derecha y el final principal a la
izquierda. Del mismo modo, el eje principal dereversa irá de izquierda a derecha, con el principio principal a la
derecha. Paracolumna, el inicio principal todavía está en la parte superior y el extremo principal está en la
parte inferior, al igual que para los idiomas de izquierda a derecha, ya que ambos son idiomas de arriba a
abajo.

Tabla 2-3. Dimensiones y direcciones del eje principal y transversal, junto con sus puntos de inicio, puntos
finales y direcciones cuando el modo de escritura es de derecha a izquierda

Flexión de direcciones en la fila de modos de escritura

RTL reversa columna columna inversa

eje principal De derecha a izquierda de izquierda a derecha de arriba hacia abajo abajo hacia arriba

dimensión principal horizontal horizontal vertical vertical

inicio principal derecho izquierda cima fondo

extremo principal izquierda derecho fondo cima

tamaño principal ancho ancho altura altura

dimensión cruzada vertical vertical horizontal horizontal

inicio cruzado cima cima derecho derecho

extremo cruzado fondo fondo izquierda izquierda

tamaño cruzado altura altura ancho ancho

Si su sitio tiene modo de escritura: horizontal-tb conjunto, como en Figura 2-5, el eje principal del
contenido de hilera y reversa será vertical, mientras que columna y columna inversa son
horizontales. Elmodo de escritura La propiedad está comenzando a obtener soporte en los
navegadores, con soporte en Edge y Firefox, soporte con prefijo en Chrome, Safari, Android y
Opera, y soporte para una sintaxis más antigua en Internet Explorer.

28 | Capítulo 2: Contenedor flexible

 Mientras que el CSS dirección propiedad junto con unicode-bidi se puede
utilizar para controlar la dirección del texto, no lo haga. Se recomienda
utilizar eldir atributo y CSS modo de escritura propiedad porque HTML dir
atributo se refiere al contenido HTML, y el modo de escritura la propiedad
se refiere a la distribución.

Es importante comprender que las cosas se invierten cuando se invierte la dirección de escritura.
Ahora que comprende eso, para simplificar mucho la explicación (y la comprensión) del diseño flexible,
vamos a hacer que el resto de las explicaciones y los ejemplos se basen en el modo de escritura de
izquierda a derecha, pero incluiremos cómo afecta el modo de escritura las propiedades y
características flexibles discutidas.

La forma en que aparece su diseño flexible en la pantalla está determinada en parte por las
interacciones entre flujo flexibleque incluye dirección flexible y envoltura flexibley el modo de escritura.
Hemos cubierto la dirección en la que se agregan los elementos flexibles a una línea de elementos
flexibles, pero cuando se llega al final de la línea flexible, ¿cómo se agregan las nuevas líneas flexibles?

Al pensar en dirección flexible, ahora sabemos que los elementos flexibles comenzarán a colocarse a lo largo
del eje principal del contenedor flexible, comenzando desde el inicio principal. Las direcciones "cruzadas"
entran en juego cuando se trata de agregar líneas adicionales de elementos flexibles, conocidos comolíneas
flexibles. Cuando elenvoltura flexible La propiedad se usa para permitir que el contenedor se envuelva si los
elementos flexibles no caben en una línea, el cruzar Las direcciones determinan la dirección de líneas
adicionales en contenedores flexibles de varias líneas.

Mientras que la disposición de los elementos flexibles en cada línea flexible se realiza en la dirección principal, desde
el inicio principal hasta el final principal, la envoltura a las líneas adicionales se realiza a lo largo de la dirección
transversal, desde el inicio transversal hasta el final transversal.

El eje transversal es perpendicular al eje principal. Como vemos enFigura 2-9, cuando tenemos filas
horizontales de elementos flexibles, el eje transversal es vertical. Las líneas flexibles se agregan en la
dirección del eje transversal. En estos ejemplos, conflujo flexible: envoltura de fila y
flex-flow: envoltura de reversa de fila establecido en idiomas horizontales, se agregan nuevas líneas flexibles debajo de

las líneas flexibles anteriores.

El tamaño de la cruz es el opuesto al tamaño principal, siendo la altura para hilera y reversa y ancho
para columna y columna inversa en ambos lenguajes RTL y LTR. Las líneas flexibles se llenan con
artículos y se colocan en el contenedor, con líneas agregadas comenzando en el lado de inicio cruzado
del contenedor flexible y yendo hacia el lado del extremo cruzado.

Propiedades del contenedor flexible | 29

Figura 2-9. Flexión de líneas enhilera y reversa Cuándo envoltura flexible: envoltura Está establecido

El envolver-revertir valor invierte la dirección del eje transversal. Normalmente paraflexdirection de

hilera y fila-reversa, el eje transversal va de arriba a abajo, con el inicio transversal en la parte superior y
el extremo transversal en la parte inferior, como se muestra en Figura 2-9. Cuándoflexwrap se
establece en envolver al revés, Las direcciones de inicio y final cruzados se intercambian, con el
comienzo cruzado en la parte inferior, el extremo cruzado en la parte superior y el eje transversal que
va de abajo hacia arriba, como se muestra en Figura 2-7. Las líneas flexibles adicionales se agregan
encima o encima de la línea anterior.

Si el dirección flexible se establece en columna o columna inversa, de forma predeterminada, el eje

transversal va de izquierda a derecha en los idiomas de izquierda a derecha, y se agregan nuevas líneas
flexibles a la derecha de las líneas anteriores. Como se muestra enFigura 2-10, Cuándo envoltura flexible se
establece en envuelto el eje transversal está invertido, con el inicio transversal a la derecha, el extremo
transversal a la izquierda, el eje transversal que va de derecha a izquierda, y se agregan líneas flexibles
adicionales a la izquierda de la línea dibujada anteriormente.

30 | Capítulo 2: Contenedor flexible