Transcripciones
1. Introducción: Si eres desarrollador
y brazo para llevar tus habilidades de desarrollo web
al siguiente nivel
dominando CSS flexbox. Entonces este curso es para ti. Hola, soy shuffle, un desarrollador
front-end. Pesos de nuestros siete
años de experiencia. Desarrollador yo mismo
y destacando, me di cuenta de que
los desarrolladores principiantes se enfrentan dificultades para entender
los conceptos de Flexbox. Pero aprendiendo CSS,
Flexbox es esencial para convertirse ahí en un desarrollador web. Así que creé este curso para ayudarte a entender
todo sobre CSS Flexbox con
ejemplos prácticos y proyectos. Al final de este curso, podrás
usar CSS flexbox en tu diario o posers para crear diferentes
tipos de layouts. Entonces, si estás listo para
dominar CSS Flexbox, te
veré en la clase.
2. Cómo crear una caja de flexbox: Hola a todos. Este video vamos a empezar a aprender hace CSS Flexbox. Digamos que aquí tenemos un
contenedor. Y dentro de este contenedor, hay múltiples elementos
HTML. Y como ya sabes que los elementos HTML pueden ser de
dos tipos principalmente diferentes. Entonces el primero es
el elemento inline, y el segundo término es
el elemento de nivel de bloque. Entonces los elementos en línea serán una pila como esta uno
después del otro. Los elementos inline solo ocupan
el espacio que necesitan. Entonces en realidad preguntaron esto en una sola línea hasta a menos que necesiten más
espacio que eso. Pero para los elementos a
nivel de bloque, los elementos van a tomar todo lo horizontal es más. Entonces esto va a tomar todo lo que el ISP es,
hay disponible. Ahora vamos a aplicar el
Flexbox en este contenedor. Por lo que aplicar el Flexbox en
el contenedor es muy fácil. Sólo vamos a
apuntar al contenedor y darle a esto una exhibición de flex. Ahora, llegamos a Flexbox. Ahora los términos relacionados con el flexbox no son
realmente definitivos, pero vamos a llamar a este contenedor el contenedor
flex. Y los ítems son los elementos
en set el contenedor flex, vamos a
llamarlos así flex items. Entonces creo que
será más interesante y fácil de aprender si
hacemos esto en el código. Así que vamos a
ver esto en código. Entonces he creado
una carpeta dentro la carpeta que
solo está en index.html. He abierto esto por el Visual Studio Code y al usar la extensión Live
Server, también la
abrí por Chrome. Puedes usar cualquier navegador
o ir a un tratado sobre usar. Entonces este es el esqueleto
HTML simple, nada más dentro de él. Hay crear un contenedor. Sólo voy a crear un div con la
clase de contenedor. Dentro de este div, voy
a poner múltiples cintas. Así que pongamos un nombre a este ítem, o vamos a darles
el nombre de clase del ítem y otro nombre de clase para
cada uno de ellos por separado. Entonces artículo en 23 así. Entonces este es el
primer ítem y
sólo voy a copiar
esto unas cuantas veces más. Hagámoslo seis artículos. Ahora, vamos a reemplazar
el ítem 234.56. Entonces este es el cuarto. Enciéndelo. Y el último es el sistema. Así que conseguimos seis artículos son divs
dentro del contenedor div. Ahora podemos usar realmente
un archivo CSS externo. Lo que creo que
sólo voy a poner en una etiqueta de estilo aquí y codificado. Entonces tenemos seis dB vistos aquí. Entonces para que
sea más obvio y podamos ver más
sobre el flexbox. Vamos a darle estilo un
poco para el contenedor. Sólo voy a darle a esto un color de
fondo al morado. Y también vamos a darle a esto
una frontera a su alrededor. Entonces solo le voy a dar un borde de tres píxeles,
que es sólido. Y usemos el color negro. Ahora tenemos esto. Entonces este es nuestro contenedor. Sólo voy a darle a
esto un poco de radio
fronterizo para
que se vea bien. Entonces diez basales. Consigue que terminemos con
el contenedor. Ahora apuntemos al
ítem más firmar aquí. Entonces va a apuntar a todos los divs dentro
del div contenedor. Así que apuntemos al ítem y demos a este un
color de fondo rojo. El color del sabor.
Hagámoslo altura de color. De lo contrario apenas es visible. ¿Bien? Entonces ahora vamos a darle a esto un margen, como diez píxeles, así que
tendrán un bonito hueco entre ellos. También para el gusto, sólo
voy a
hacerla un poco más grande. Entonces usemos el
tamaño de fuente para tal vez 70 piezas. Es masa más grande. Ahora, también, nuevamente, usemos un radio de borde
para que se vea bien. También agreguemos un poco de relleno para que el sabor tenga algunos huecos. Lo encontré. Bien, entonces tienes
seis que han visto aquí. Y el profundo establece ahí los elementos de
nivel de bloque. Entonces hay actualizaciones
entre sí particularmente, por lo que va a tomar todo horizontal es mejor
que esté disponible. ¿Bien? Ahora vamos a hacer de
este contenedor un flexbox. Entonces para hacer eso, vamos a darle a
esto un display de flex. Ahora vamos a ahorrar. Y ahora este es el contenedor de copos y
estos son los artículos flex. Ahora hablemos de
la dirección flex.
3. Las direcciones de la flex: Hay dos tipos diferentes de propiedades que podemos aplicar en el flexbox CSS para alinearlas de manera diferente
o para modificarlas. Entonces el primer tipo
de propiedades que
podemos aplicar sobre el contenedor de
copos, que es el elemento padre. Y algunas de las propiedades
que podemos aplicar sobre los elementos flex o
los elementos secundarios. Entonces para
entenderlo más públicamente, vamos a
hablar de las salidas. Entonces aquí adentro, como pueden ver, van a alinearse en
esta dirección horizontal. Por lo que parte
del lado izquierdo y va
hacia la derecha. Entonces estas son las salidas principales
o las salidas de escamas. Necesitamos entender
esto porque en realidad
podemos cambiar
las x aquí. Entonces este es el flexor existe, por lo que existe lo contrario se
llama el eje transversal. Entonces en este caso, por defecto, el flexor existe, es, va de izquierda a derecha. Esta es la principal existe. En otro término. Esta es en realidad la fila. La columna será verticalmente capitulo
patrimonial sobre otro. Entonces esta es la fila y este
es el eje flex predeterminado. Pero en realidad podemos
modificar la reacción o la frase sexo es usando
la propiedad flex direction. Ahora la propiedad de PlayStation
se aplicará en el contenedor
de copos. Entonces veamos más sobre eso. La propiedad de dirección de flexión obtuvo cuatro
tipos diferentes de fuelles. Esa fila, columna, fila inversa
y la columna inversa. Entonces el valor predeterminado de
la dirección de flexión es fila. Va de izquierda
a derecha y en el eje x o la
horizontal existe. Ahora la siguiente que
tenemos aquí es la columna. Entonces la columna, tú, creo que ya
adivinaste que va
a ser
vertical, erguidos entre sí. Entonces se inicia desde
la parte superior e inferior. En este caso, si hacemos la
frase dirección a columna, ahora existe el main
o main flex
existe, va a ser el eje
vertical. El eje transversal es
lo opuesto existe, que es el horizontal. Entonces en caso de la fila inversa, como los nombres tiene apenas
el lugar principal sale aquí se va a
formar de derecha a izquierda. Entonces ahora como se puede ver en el objetivo es que sea cierto
de izquierda a derecha. Entonces esta es la fila e incus o pro reverse que existe
será lo contrario. Entonces se inicia
de derecha a izquierda. Y también para los artículos, va a comenzar
de derecha a izquierda. Entonces, el primer artículo estará
en la esquina superior derecha, luego el segundo, luego el tercero, luego el cuarto
artículo, y así sucesivamente. Para la columna inversa, también
es exactamente la misma. La columna se revertirá. Por lo que comenzará desde
abajo y va a la parte superior. Ahora en este caso,
las salidas principales, nuestros flexores principales se va
de abajo hacia arriba. Entonces creo que necesitamos
ver estas cosas en código para que lo vamos
a entender perfectamente. Entonces este es el código y
ya hablamos de
esa frase j dirección. Entonces la
dirección flex predeterminada es row, y estas son las propiedades que vamos a aplicar
en el contenedor flex. Con los elementos hijos. Vamos a hablar de
las propiedades sobre los elementos
hijos más adelante. Pero por ahora,
vamos a hablar solo de las propiedades que
vamos a aplicar en el contenedor de
frases. Así que vamos a aplicar la dirección de
flexión. Y por defecto es rho. Entonces si lo guardamos,
no va a cambiar nada porque
este es el valor predeterminado. Ahora bien, si lo hacemos algo
definido como columna, ahora va a ser así. Entonces esta es la columna. Ahora las salidas principales
aquí se provocan
de arriba a abajo
y existe la vertical, o bien el eje transversal va a estar comenzando
de izquierda a derecha. Ahora bien, si divergimos esto, digamos que vamos
a usar el reverso de fila. Entonces ahora en este caso, el flexor existe o los principales existen parten
de derecha a izquierda. Y los artículos van a comenzar desde el sitio hacia el lado izquierdo. Entonces el primer ítem está en la esquina superior derecha,
luego 2,345.6. Ahora la columna inversa también
es la misma. Se va a empezar desde
abajo y sube. Vamos a utilizar la columna
revertir su Guardar. Ahora el primer ítem
está en la parte inferior, luego el segundo ítem, tercero, cuarto, quinto y sexto. Entonces en este caso, la reacción
por defecto del flexor existe
va de abajo hacia arriba, y el eje transversal va
de izquierda a derecha. Entonces esto es todo
sobre la Playstation. Ahora
hablemos del contenido justificado.
4. Alineación en el eje de la flexibilidad: contenido justificado: Bien, entonces el
contenido de justificación en realidad arcos a lo largo del eje x son
los principales existe. Entonces si cambiamos la frase sexo, estas son las principales que
existe mediante el uso de jugadas dirección que
justifican el contenido
también va a cambiar
porque justify-content solo actúa sobre el flex principal x no
está a lo largo del eje transversal. Por lo que hay seis valores
diferentes para la justificación de la pobreza de contenido. El primero es
ese stat de escamas, que es el valor predeterminado. Esto es lo que ya
hemos visto. Es tercero desde la izquierda, luego va hasta que se apilan todos
los artículos. segundo valor del
contenido justificado es el extremo flex para el fundente y va a empujar al final
del contenedor. Pero el alineamiento va a ser el mismo éster de primero, segundo, tercero y cuarto. Pero va a estar al
final del contenedor de hojuelas. Ahora para el centro, va a estar en la posición central
del contenedor de copos. Ahora el es entre es
algo interesante. Por lo que en caso de un espacio
entre los artículos o los elementos flexibles tendrán una cantidad
similar de hueco
entre sí. Por lo que el artículo de primer lugar
será en el ayuno, nuestro punto de partida
del contenedor de copos. Y el
artículo del último lugar estará en el punto final
del contenedor flexible. Y todo el espacio
disponible se dividirá entre
los demás elementos de escamas
para que
tengan una cantidad similar de
hueco entre sí. Ahora el surround es algo similar pero un
poco diferente. Por lo que en caso de un espacio alrededor todos los artículos o los elementos flex tendrán una cantidad similar de espacio a la izquierda y a la derecha. Entonces como puedes ver aquí, la x es el valor de
cantidad similar de pares base. Cada artículo se puso en el
lado izquierdo y en el lado derecho. Ahora el espacio de manera uniforme. Por lo que en caso de un específico, todos los artículos tendrán la
misma cantidad de espacio. Entonces todos los huecos en, incluyendo el primero obtuvieron
un hueco entre el inicio del contenedor
y el último artículo, pero un hueco con el extremo
del contenedor y la misma cantidad de
hueco está disponible entre todos los artículos
y el borde. ¿Bien? Entonces estos son los seis
valores de justificar contenido y justificar contenido solo
ofs a lo largo de las salidas principales. Entonces vamos a ver esto
con código. Entonces hagámoslo. Sólo voy a
comentar flex dirección columna inversa
porque vamos a usar el
valor por defecto, que es rho. Así que justifican el contenido también
arcos en el contenedor flex. Entonces digamos que fue lo
que justifica el contenido. Y por defecto, el
valor son escamas. Inicio. Entonces si lo guardamos, no va a cambiar nada porque este
es el valor predeterminado. Ahora el segundo valor del
que vamos a hablar es el final de los copos. Entonces en caso de escamas
y va a
empujar al final de
la frase contenedor, que se diferencia por este fondo violeta
y un borde de sangre. Entonces este es el extremo
del contenedor flex
y van a ser empujados al
final del contenedor. Ahora el centro, y
creo que ya sabes cómo
va a suceder. Todos los artículos o los artículos
flexibles estarán en el centro del
contenedor flexible así. Fellow es el espacio entre. Entonces hagamos eso es
porque entre ahora el primer elemento estará
en el punto de inicio del contenedor flexible
y el último artículo estará en el punto final del contenedor de copos y todo el espacio alrededor del
artículo, por lo que sería similar. El siguiente valor del que
vamos a
hablar es el espacio alrededor. Ahora van a tener
la cantidad similar de SP para cada elemento
flexible en particular a la
izquierda y a la derecha. Ahora, el último valor
para justify-content es el espacio de manera uniforme en chismes de
manera uniforme todos los artículos. Entonces tendremos una cantidad
similar de espacio entre ellos y entre el punto inicial y final
del contenedor de frases. Entonces esto es todo
sobre el contenido justificado. Y nuevamente, se va a org
a lo largo del eje x. Este es el lugar x es ahora, y así es como le
va a importar así. Pero si cambiamos la
dirección del flex a fila, ahora, justificará
que el contenido se armará
a lo largo del eje principal
o a lo largo de la columna. Así que no te confundas. Vamos a hablar más de
eso más adelante. Ahora en el siguiente video, hablemos de
los elementos align.
5. Alineación en el eje transversal: alineación: Los elementos de alineación son
en realidad arcos a lo largo del eje transversal porque el contenido justifican o
a lo largo del eje principal. Entonces en este caso
el eje transversal es, va de arriba a abajo
o la partícula existe. Entonces para demostrar
esto perfectamente, vamos a darle una altura
al contenedor. Vamos a darle una
altura de 400 píxeles. Y ahora como puedes ver, el primer artículo
va a comenzar desde la parte superior del contenedor
y va a la parte inferior. Este es el valor predeterminado
de los elementos de alineación. Este es el halo es estrés. Así que vamos a aplicar los elementos align y también se aplica
sobre el contenedor flex. Entonces el valor predeterminado
es el estrés. Ahora va a ocupar todo el espacio que tiene
celda en el eje transversal. Este es el valor predeterminado. Ahora, hay más hellos
disponibles para eso. Ahora primero son los
copos, una pila. Entonces como el único equipo como en esto es lo mismo que el contenido de
justificar. Por lo que va a comenzar desde el punto
de partida del eje transversal, que es la parte superior. Ahora va
a estar tan apretado en la parte superior son el
punto de partida del eje transversal. Ahora el siguiente término es el final. Entonces en este caso
va a estar al final del eje transversal. Entonces esto está en la parte inferior. El siguiente es el centro. Entonces va a estar en el centro del eje
transversal así. De hecho, es bastante
útil si solo estás en LAN, algo en el centro. Entonces digamos que
tienes un div y
quieres poner otro div
en el centro de eso. Por lo que solo puede darle flex a la pantalla DVI
padre, y justificar el centro de contenido,
alinear el centro de elementos. Entonces va a
estar en el centro. Esto lo vamos a ver en un ejemplo
práctico más adelante. Ese siguiente valor aquí
es la línea de base. Entonces, para
entender la línea de base, vamos a apuntar a
algunos ítems separados ahí. Entonces les he dado una clase separada para
cada uno de los artículos. Vamos a apuntar al
ítem número dos. Entonces vamos a darle este artículo
a un relleno en la parte superior, tal vez en 100 píxeles. Y también vamos a darle a esto
un acolchado en la parte inferior. Tal vez. Vamos a darle 200 pixeles. Ahora, va a
tomar esa misa es lo mejor. También hay objetivo
y otros en, tal vez el artículo para y darle a esto una
parte superior acolchada de 300 píxeles. Ahora, como pueden ver aquí, en realidad tres lo terminan
un poco más, así que sólo voy
a guardarlo a 200. Ahora, como puedes ver aquí, todos los artículos de aquí, todo el sabor está
en la misma línea. Así que esto es difícil en realidad
esa línea de base hacer. Esto es todo
sobre los elementos de alineación. Y en el siguiente video, hablemos del flex wrap.
6. Ejemplo en el mundo real: centrar una inmersión: Ahora como
ya hemos aprendido sobre los elementos alinear y
justificar el contenido, creo que es el
momento de ver realmente a través de un ejemplo práctico
del mundo real. Aquí, he diseñado una sección de
héroes de tu sitio web. Entonces esto es muy sencillo. Tenemos el
equipo de fondo está con la sección y algo de texto y un botón
en el centro de la misma. Entonces esto es lo que
vamos a crear ahora. Pero antes de
entrar en el curso, creo que es mejor planificarlo
realmente para el arte. Entonces al principio lo
vamos a hacer pan, cómo lo vas a hacer, luego vamos a
pasar por el curso. Esta es una muy buena práctica para planificar todo antes de
entrar en el código. Entonces lo que podemos hacer aquí, podemos crear una sección y vamos a dar
al equipo de fondo es
con su sección. Y dentro de esta
sección o del div, en realidad
podemos poner los ítems, que es el texto
y el botón. Pero vamos a
aplicar los flicks con toda
esta sección y hacer el elemento hijo
en el centro. Si tenemos varios elementos
dentro del elemento padre, va a ser difícil. Entonces lo que vamos
a hacer es que vamos
a crear otro div, que contendrá todos
los elementos de aquí. Entonces creo que esto
parece confuso, pero se va a poner
fácil si vamos al código. Entonces he creado una carpeta, y dentro de la carpeta
vamos a index.html, un style.css, y una imagen de
fondo. He creado el marcado aquí. Tenemos una etiqueta de cabecera
con la clase de héroe. Entonces este es el elemento padre
o el contenedor flex. Entonces obtuvimos una etiqueta de encabezado
con la clase de cero. Entonces este va a ser
nuestro contenedor flex. Y dentro de ese contenedor, conseguimos sólo en hojuelas artículo, que es el contenedor. Y dentro de él, he puesto todos
los elementos que tenemos aquí, como el gusto del título, subtítulo y el botón. Entonces este es el artículo de copos y este es el contenedor de
copos. También he añadido un estilo
básico porque lo contrario esto va
a llevar mucho tiempo. Así que acabo de quitar el margen básico y el
relleno del navegador
poniendo un asterix y
darle a esto un **** de margen cero relleno
cero para el cuerpo. También he añadido una familia
de fuentes de Poppins y un color de negro. Entonces se va a
aplicar sobre el texto aquí. Y con el héroe que va
a ser nuestro contenedor flex, he agregado el equipo de
fondo también es, también he agregado algunos estilismos para el gusto y
también un poco de relleno en el fondo de los artículos
y también el botón aquí. Entonces esto es todo. Ahora vamos a aplicar esto. Entonces debido a este diseño de aquí, va a tomar toda
la vista. Entonces vamos a darle a la sección
hero o al contenedor, o al contenedor flexible una altura mínima de
100 viewport. Entonces esto va a tomar toda la altura que pueda
tener en la vista. Entonces esto va a comenzar
desde aquí y dos aquí. Entonces esta es la altura de 100
viewport. Y la sección
aquí es el héroe. Entonces hay darle una altura
mínima de 100 BA, que es la altura de la vista. Ahora se va a llevar toda
la vista. Lo siguiente que
vamos a hacer es pulir en la
bolsa condado señorita. Entonces vamos a aplicar ese trasfondo. Psi es para cubrir, no contener. Y también la hay
posicionar en los centros. Entonces centro de posición de fondo. También puedes usar el formulario corto, nuestro
método abreviado si lo deseas. Bien, entonces tenemos fecha. Ahora hablemos
del contenedor. El contenedor obtuvo el
máximo o 878 píxeles. Entonces hagámoslo. Vamos a apuntar
al contenedor div, que va a contener
todas las cosas dentro de aquí que gustos y botón y
darle a esto un peso máximo. 780 pixeles. Están a salvo. Ahora por defecto,
va a quedar alineado. Pero eso no queremos. Entonces también podemos cambiar ese
texto alineado al centro. También agreguemos un
poco de relleno. Centro de Estudios. Y vamos a
añadir un poco de relleno a la izquierda y a la derecha. Entonces hagámoslo. Sólo voy a
darle un cero para arriba e abajo y de izquierda
a derecha tal vez 20 piezas. Porque cuando el tamaño de la
pantalla será menor a 72 piezas, va a ser
salidas a la esquina. Entonces, si solo lo retiramos y
hacemos que el contenedor sea más pequeño, como puedes ver, se
va a agregar esto. Y si aplicamos
el relleno aquí, va a tener algún hueco. ¿Bien? Ahora hemos añadido el aceite
máximo y el relleno. Ahora vamos a centrarlo. Entonces aquí, el
elemento padre es el héroe, o la etiqueta de encabezado
con la clase héroe. Y dentro de él conseguimos el artículo de copos, que
es el contenedor. Entonces vamos a aplicar
los copos con el héroe. Entonces hagámoslo. Este es el héroe
y vamos a aplicar ese display de flex. Ahora vamos al
contenedor flex para el artículo, que es este contenedor aquí. Y vamos a
centrarlo tanto a lo largo del eje x como a lo largo
del eje transversal. Entonces este es el flexor existe. Y si quieres
centrarlo a lo largo del eje x, vamos a usar el contenido de
justify centrado. Debe estar centrado
horizontalmente. Ahora,
también vamos a necesitar
centrarlo en que la partícula existe
o ahí existe la cruz. Entonces vamos a usar
el centro align items. Ahora debería estar
debidamente centrado. Existen diferentes métodos de centrado de
pose y elemento, pero este método de flujo
también es muy útil y puede competir de una mano siempre que se va a probar un ejemplo del mundo
real, o tal vez una codificación de un sitio web para un cliente
o simplemente para usted mismo. Entonces esto es totalmente receptivo. Y como pueden ver, esto está totalmente centrado. Si hacemos que el
tamaño de visualización sea menor, también va a estar centrado si fuera a
hacerlo responsive, también
puedes agregar la
media query y los pasos. Así que haz que el sabor sea
más pequeño que eso, pero aquí no lo vamos
a hacer. Sólo para la demostración
del centrado de un elemento o
lo profundo dentro de otro
Dave mediante el uso de escamas. Entonces lo hemos hecho y
tenemos otro proyecto aquí. Aquí vamos a
usar la media query. Entonces esta es su partitura
para el siguiente video.
7. ¡Envuelve o Nowrap!: Sólo voy a eliminar
todos los elementos de aquí, como los tilings separatistas. También hay comentar esto y digamos que así es
como se ve. Ahora el hola por defecto, alinean elementos está ahí, por lo que está ocupando tanto
como lo ha hecho. Está disponible para los artículos. Ahora aquí,
sólo hay seis artículos flex. Y también voy a
comentar el contenido justificado. Entonces ahora inserta el contenedor
flex. Tenemos seis ítem. Se va a colocar
dentro del elemento flex. En realidad tiene un espacio
dentro del contenedor, pero digamos que tenemos muchos artículos que no
caben en el contenedor. Sólo voy a agregar
algunos otros artículos aquí. Entonces conseguimos 12 artículos flex. Y como puede ver, solo
hay un espacio para nueve artículos flex dentro
del contenedor flex. El otro va a
estar del lado derecho. Desbordando
flexionarán el contenedor. De hecho, podemos modificar esto
usando el escalón de rampa de escamas, también una propiedad que se puede
usar en el contenedor flexible. Entonces, el valor predeterminado de la trampa de
escamas es la rampa sin. Entonces eso significa que aquí
va a estar tomando sólo el espaciado horizontal. Entonces, si los artículos lo
van a desbordar, va a estar
en la misma línea. Entonces, apuntemos a ese rep de escamas y el
valor predeterminado no es envuelto. Entonces esto no va a
envolver nada que vaya a desbordar
los artículos extra fuera del contenedor flex. Ahora bien, si queremos poner a continuación, son los artículos excesivos
en la siguiente línea, vamos a usar el rep. Ahora va a
empujar los artículos extra. En la siguiente línea. También hay un compañero
llamado rápidamente peor. Eso significa que va a, la primera línea
va a ser empujada
al final de la salida cruzada. Entonces esto es heredar
la segunda línea. Se va a iniciar
desde el primer tono, segundo tono, y
va a la app, que es el agonista que cruza salidas o reversión
del eje cruzado. Ahora volvamos al rap.
8. Alineación de artículos de múltiples líneas: align-content: Aquí, como puedes ver, llegamos a definir líneas y hay una propiedad
que podemos usar con el contenedor flexible para
alinear las segundas líneas de pedido, ese nombre de propiedad es
el contenido de la aerolínea. Entonces, el contenido de
la aerolínea y el contenido de la aerolínea solo
es útil si tenemos múltiples líneas
de elementos Felix. De lo contrario, no sirve de nada. Así que hay siete valores
para el contenido align y el valor predeterminado es el
mismo que los elementos align. Entonces este es el estrés. Va a
ocupar tanto espacio que tenga, como pueden ver aquí. La primera línea va a tomar, es
decir básicamente tiene
y la segunda línea también, por lo que son algo similares. Entonces hay espacio estatal. Esta pequeña brecha aquí es para el margen
aquí que hemos agregado aquí. Entonces este es el valor predeterminado. El siguiente valor son los copos, es que también es similar a
los ítems de alineación. Esto va a poner
todos los elementos en
el punto
de partida del eje transversal
porque los contenidos de la aerolínea son artículos que siempre se aplican en el eje transversal. Sólo voy a
hacerlo un poco más alto. Entonces ahora esto va
a ser al inicio, a lo largo del eje transversal. Ahora bien, si quieres
empujarlo al final, como heredar el fondo, también
podemos hacerlo
usando el extremo de escamas. Ese siguiente valor
va a ser el centro. Entonces creo que ya sabes
lo que va a pasar. Todos los artículos estarán en el
centro a lo largo del eje transversal. El valor de lista que obtuvimos aquí
es el espacio entre. Ahora bien, esto va a ser similar con justificar
el contenido que hemos visto. Entonces ahora todo el espacio
disponible va a estar entre las dos diferentes
líneas de artículos flexibles. El siguiente valor es
el espacio alrededor. Entonces ahora van a tener similar cantidad
de pares de bases en la parte inferior y en la parte
superior de cada una de las líneas. El siguiente término es de manera uniforme. Ahora van a tener una cantidad
similar de espacio desde la parte superior y
entre los artículos. Por lo que habrá
una cantidad similar de espacio entre el div contenedor o el borde del
div contenedor y entre las líneas. Entonces estos son los contenidos de LAN y puede venir bastante útil. Cuando tenemos múltiples
líneas de artículos flexibles. E incluso para la capacidad de respuesta como digamos que tenemos tres elementos
para la pantalla de mayor tamaño. Y si hacemos que el
tamaño de visualización sea menor que una estrella los elementos van a ser
empujados a la siguiente línea. Entonces para
alinearlos perfectamente, podemos usar la propiedad align
content. Ahora hablemos de la tapa.
9. Espacio entre los elementos de la flexión: espacio: Yo solo voy a comentar
los contenidos align
aquí, y vamos a guardar. Ahora van a
obtener el valor predeterminado. Ahora, podemos ver este
pequeño taxi alrededor de los artículos. Esto es por el margen. Vamos a comentar esto. Digamos ahora no
hay brecha ahí, en realidad adyacentes entre sí. Ahora hay una
propiedad para crear algún hueco entre los elementos flex, que
en realidad se llama la brecha. ¿Bien? Entonces hay dos tipos de gap. Podemos usar el contenedor de frases. Entonces el primer término es el rho cap y el segundo
término es el hueco de columna. Por lo que el AP pícaro se
aplicará entre dos ítems
diferentes, como entre dos filas diferentes. Entonces probemos esa brecha de fila. Y voy a usar
diez piezas aquí. Ahora, como puedes ver aquí, eso es un espacio de diez píxeles entre
las dos filas diferentes. Si queremos despejar
algún hueco entre las columnas se encuentran entre los
elementos dentro de la columna. Podemos usar la columna. Sí. Sellos, tal vez 15 piezas. Ahora va a tener buena
brecha entre esos. Pero si no
pones dos valores distintos o ambos partidos. Entonces también puedes comentar
esto y probar la brecha. El hueco sin especificar
la fila o columna. Se va a aplicar tanto
en fila como en columna. Entonces probemos 15 piezas. Y esto va a
conseguir el hueco entre
los ítems tanto a lo largo de la fila
como de la columna de 15 píxeles. Si no eres diferente
tipo de valores, también
podemos hacer eso. Entonces probemos cinco piezas aquí. Entonces el primer valor aquí
va a ser la fila, y el segundo valor
aquí es para la columna. Ahora el hueco de 15 piezas
está disponible entre las filas de pelo y
la pelea
se burla va a estar disponible
entre las columnas. Entonces estas son las propiedades que podemos usar en el contenedor de
hojuelas. Y a partir del siguiente video, vamos a hablar de
algunas propiedades diferentes que podemos aplicar
en los artículos del lugar. Entonces nos vemos ahí.
10. Orden de los artículos de la flexión: Hasta el momento sólo hemos
hablado de las propiedades
que se pueden aplicar, el contenedor de cara o
el elemento padre. Ahora, desde este video, vamos a hablar de
las propiedades que se pueden aplicar sobre los
elementos hijos o los elementos flex. Entonces al principio vamos
a hablar del orden. Entonces, por defecto, esto se va a ordenar tal como están, como. El primer artículo viene primero, luego el segundo artículo. Manera en realidad hemos codificado esto. Esto va a ordenar la
misma dirección y el mismo orden. Así que sólo voy a reducirlo. Vamos a quedarnos sólo cuatro artículos
y hasta que se levantara. Bien. Además, sólo voy a borrar las cosas de aquí para
que sea menos desorden. Además, comentemos esto. También el margen. Y sólo voy a
poner un poco de hueco aquí, como 15 pixeles. Bien, bien. Bueno para ir. Ahora, el
primer ítem viene primero, luego el segundo y el
tercero que el cuarto. Entonces digamos que
queremos alinearlos,
se les ordena de manera diferente. Entonces, por defecto, todos
los elementos flakes obtuvieron un orden predeterminado de cero, pero en realidad podemos aplicar orden por separado en los elementos
hijos. Y la regla es que cuanto menor el orden que
tiene el elemento, viene rápido. Entonces aquí por defecto, todos los artículos obtuvieron
el orden de cero. Entonces si ponemos, si
le damos un elemento o el ítem escamas y
orden de menos uno, que es menor que cero, vendrá primero. Entonces digamos que vamos
a apuntar al punto tres. Aquí viene el tercero, y dale este orden
de menos uno. Entonces hagamos ese ítem tres, y vamos a darle a esto el
orden de menos uno, que va a ser
menor que cero y menor. El orden es, viene rápido. Vamos a guardar esto.
Y como pueden ver, los terceros artículos llegan rápido. Así que en realidad podemos usarlo
y viene bastante útil. Vamos a ver más
sobre eso en el siguiente video. Pero por ahora, vamos a pedir
algunos artículos más dentro de él. Entonces el primer ítem
llega al final. Entonces, si apuntamos al artículo en el
que es el primer artículo, ahora está en la segunda
posición porque el tercer artículo obtuvo un
pedido menor a cero, que es el orden de on. Entonces ese es el primer artículo
que obtuvo un pedido de cero. Ahora, digamos que le damos
el orden de tal vez cinco. Ahora tiene
más orden que el resto de los artículos porque
el segundo artículo aquí obtuvo un
pedido predeterminado de cero. El tercer artículo obtuvo el
orden de menos uno, y el cuarto artículo
obtuvo 84 orden de cero. Ahora bien,
el artículo uno tiene el pedido más grande, por lo que vendrá en el último, porque cuanto mayor sea el pedido, va a estar en el último
artículo del orden de cinco, y viene en el último. Así es como
va a funcionar. Entonces digamos que queremos empujar el cuarto ítem, El primer ítem. También podemos hacerlo si
apuntamos el artículo y damos este pedido más grande que el artículo sobre quién tiene
el pedido de cinco. Entonces vamos a
darle un más que eso. Entonces vamos a darle seis y
va a venir después
del primer ítem. Pero en cosa que si
tenemos múltiples elementos hijos
con el mismo orden, ¿qué pasará entonces? En ese caso, la alineación o el orden aparecerá
como aquí hemos codificado. Entonces digamos
el ítem del orden de cinco, el ítem para un pedido del
mismo valor, este es cinco. Ahora bien, si guardamos esto como
el ítem uno viene primero, entonces ese es el ítem cuatro. Por lo que ahora el último artículo
será el artículo cuatro, y antes de eso,
habrá el artículo a la venta. Ahora los cuatro vienen últimos y el primer ítem
viene antes de eso. Entonces esto es todo
sobre el orden. Y puede causar bastante útil
cada vez que vas a pedir algo así como de manera diferente en una
pantalla de menor tamaño o cualquier cosa. Entonces en el siguiente video, vamos a hacer este proyecto que podamos ver más sobre
el orden y el flujo. Entonces hagámoslo.
11. Ejemplo en el mundo real: cambiar la orden en pantalla más pequeña: En este video, vamos
a mantenerlo como simples postulaciones que pueden enseñarte muchas
cosas sobre el flexbox. Entonces este es nuestro proyecto y
esta es una sección de héroes. Entonces, antes de entrar en el código, vamos a expandir esto. Entonces conseguimos un contenedor. Este es nuestro contenedor aquí. Sólo voy a
dibujar un rectángulo. ¿Bien? Entonces este es el contenedor. Simplemente dale un trazo
y retírelo. ¿Bien? Entonces este es el contenedor
y vamos
a poner los copos por, por día en este contenedor. Aquí. Dentro de este contenedor, tenemos otro que
va a ser nuestro hijo flex. Entonces va a ser hijo
de nuestro
artículo flex, que es este. Entonces este es el hijo de fase y este es el contenedor flex. Así podremos aplicar los efectos de
visualización sobre el elemento padre y también hacerlo justificar-centro de contenido, alinear los elementos al centro
para que se vaya a centrar a lo largo
del eje transversal. Y también el análisis de flujo principal. También le vamos a dar
una altura máxima para
que no salga
del blanco de eso. Entonces dentro de él, nuevamente, vamos a usar el
flex display en este contenedor, que en realidad es el
elemento hijo de un contenedor flex. Al usar el
flex de pantalla en eso, vamos a aplicar
a diferentes artículos. Al igual que tenemos este div
aquí, que es este. Sólo voy a
darle un trazo. Este va a ser un artículo rápido o el elemento de escamas dentro de
este contenedor flexible. Y el segundo término que
llegamos aquí es este de aquí. Entonces la imagen es el
segundo elemento flex y el primer elemento de la lista
va a ser de ese gusto. Entonces vamos a poner todos
los gustos dentro de un div. Entonces vamos a diferentes
profundidades dentro estos contenedores de copos y
vamos a alinearlo. Entonces en caso de una pantalla de
pequeño tamaño, vamos a hacer el
flex dirección a columna. Ahora por defecto,
va a ser la fila. Pero en una pantalla de pequeño tamaño, no
somos los correos electrónicos
para llegar rápido en la parte superior y en la parte inferior
vamos a poner el sabor. Entonces hagámoslo. Sólo voy a
iniciarlo desde lo viscoso. Así que vamos a crear una etiqueta de encabezado
con la clase de Theta. Entonces esto va a estar
conteniendo todo. Entonces este es el elemento padre y vamos a agregar un color de
fondo con eso y usar el flex de visualización para hacer el contenido dentro
de su centro. Ahora en su lugar, vamos
a conseguir el div contenedor. Este va a ser nuestro
segundo contenedor flexible. Dentro de este contenedor,
llegamos a definir DBS justo en va a estar
conteniendo todo el sabor. Otro va
a contener la imagen. Entonces hagámoslo.
En cambio, ellos cenaron. Vamos a crear un div y
solo voy a darle a esto una clase de
contenido contenedor. Bien, bien. Ahora en su lugar más tarde Susan
Sontag y puso todos los gustos. Sólo voy a
copiar y pegar esto. Bien, aquí vamos. Ahora para el técnico de Prager, vamos a poner algún texto
ficticio como Lorem Ipsum. Entonces nos dieron dos botones
diferentes. Esto es en realidad un EMS. Sólo le voy a dar a
Steve un nombre de clase de Héroe. Botones de héroe. Bien, insertado como este
es un botón o un enlace, vamos a usar la
etiqueta de anclaje aquí e insertarla, deja sella las imágenes. Y creo que el
nombre de la imagen se almacena punto PNG. Sólo voy a copiar y
pegar esto porque aquí
tenemos dos elementos diferentes. El segundo término es
el Play Store. Bien, bien. Este es el servidor en vivo y podemos
ver los ítems aquí. Ahora bien, hay bueno el segundo
profundo dentro del contenedor. Entonces este va a ser un contenedor
flex y este es el elemento flex rápido y el
conjunto de capas el segundo elemento flips, que va a
ser un hero images. Vamos a darle esto, agruparlos, héroe
Amos, dentro de él. Agreguemos el hero
images dot PNG. Lo conseguimos. Y por defecto, esta va a ser
una línea como esta. No sé por qué el cursor
está parpadeando así. Bien, Ahora pasemos al style.css que ya agregué. Bien, no he hecho nada, así que voy
a minimizar esto. Y como puedes ver, hay un margen predeterminado y relleno. Entonces, si solo usamos la estética ahí para eliminar el estilo
predeterminado, así puedes hacer tanto en cero. Ahora, no hay hueco
a la izquierda y a la derecha. Entonces agreguemos un relleno de cero. Sólo esté a salvo. Ahora vamos a apuntar aquí al héroe, que es el elemento padre, que va a contener
un todo dentro de eso. Con el héroe. Sólo voy a darle a
esto una altura mínima. En realidad, vamos a establecer primero el color de
fondo. Sólo voy a poner un código de color
hexagonal como D, E, D tres CA. Entonces este es el
color del pelaje coloreado guardado y conseguimos el color del pelo. Ahora, vamos a darle a esto una altura mínima de
100 altura vívida. Entonces va a tomar la altura
de la ventana gráfica. Después de eso. Mantengamos al héroe
un flex de pantalla. Pero antes de eso, ahí está esto le dio un color del texto, como va a ser applet, toda esa degustación Aquí. Es un poco negruzco. Ahora apuntemos
al div contenedor. Entonces hagamos ese contenedor. Y vamos a
darle a esto un máximo de ocho de 13 70
pixeles. Vamos a Ahorrar. Ahora. Tiene las 13 70 piezas de altura, pero, pero no podemos verla porque esto en
realidad no está en el centro. Entonces ahora vamos a aplicar
el flex de pantalla sobre eso. Entonces ahora tienes que
definir artículos flex. Por defecto, la
dirección de flexión es fila, por lo que va a aparecer tras otra en dirección
horizontal. Entonces hagamos que muestre flex. Vamos a ahorrar. Como pueden ver , así aparece. Entonces ahora no estamos todos los
elementos en el centro, como a lo largo del eje transversal. Así podemos usar el centro
align items. Ahora están centrales
a lo largo del eje transversal, pero también solo para estar seguros, también
vamos a usar el
espacio de contenido justificado entre para que la imagen vaya a estar en la esquina final del flexbox, que es el contenedor. Y el texto aquí
va a estar en el punto de partida
del contenedor flex. Entonces usemos justificar
contenido entre. No va a
cambiar nada porque todos los ítems van a llevar todo lo explícito que pueda tener. También hay que poner un poco
de hueco entre los artículos. Sólo voy a
usar la ventana gráfica phi. Por lo que va a ser el cinco
por ciento del OID total. Ahora vamos a
hacerlo centro. Entonces creo que lo hemos visto
en el proyecto anterior. Así que vamos a apuntar
al héroe que
solo tiene en elementos hijos
dentro de eso. Y dale a esto una exhibición de
escamas. Entonces hagámoslo. Mostrar falsificaciones y
justificar-centro de contenido. Alinee los artículos al centro. Entonces se va a
centrar tanto a lo largo del eje x como a lo largo
del eje transversal. Ahora, vamos a hacer un
poco de estilo. Sólo voy a copiar y
pegar esto porque
no voy a robar el
tiempo aquí, así sucesivamente. Un hijo que es es el texto del título. Tengo una fuente, fuente familiar, line-height, margin,
bottom para que me importe alguna brecha con el texto general. Para la etiqueta de párrafo, aquí
tenemos una familia
de fuentes de Poppins. Y también formó tamaño o algún margen inferior para obtener
algún hueco con imágenes aquí. Bien, así que tenemos
todo bien. Ahora vamos a agregar también
un relleno con el contenedor porque aquí no
podemos ver nada
diferente. Pero para la pantalla de menor
tamaño, solo
vamos a
sumar un poco más arriba. Sobre todo porque si lo
hacemos más pequeño. Como puedes ver, siempre
que va a ser menor que la altura máxima, como 13, 70 píxeles, va a ser como
en el punto final, el inicio del contenedor, o lo siento, el navegador. Ahora bien, si agregamos un
poco de relleno con el contenedor
en la parte superior e inferior, digamos 50 píxeles
e izquierda y derecha. Ahí están esos 30 pixeles. Vamos a ahorrar. Ok, ahora tienes este pequeño
hueco con el acolchado. Así que hagámoslo receptivo. Entonces, para que sea receptivo, vamos a utilizar
la media query. Bien, así que hagámoslo. Yo sólo voy a escribir
los medios se limpian y vamos a darle a
esto un ancho máximo. Entonces, cuando el tamaño de visualización sea menor que esta altura
máxima, se va a aplicar. Así que vamos a darle una
altura máxima de nuestros 12, 70 píxeles. Sólo voy a desglosarlo en ese navegador en particular. Entonces a primera lista
me sale el contenedor y vamos a hacer el
flex dirección a columna. Entonces si hacemos el flex
dirección a columna. Quien es justo ahora es por
defecto esa fila ahí, lo que están más felices en la fila. Y si hacemos el flex
dirección a columna, van a aparecer en la vertical existe
tras otra. Entonces hagámoslo.
Yo solo voy a apuntar al contenedor
y darle a esto una dirección flexible a la columna Guardar. Y como pueden ver, va a ser yo emparejado
y la columna existe, que es la
vertical existe ahora, este es el flujo principal existe ahora porque cambiamos la dirección flex
por defecto. Pero como pueden ver
aquí, por defecto, el orden va
a aparecer de la manera
que hemos codificado aquí. Entonces dentro de este contenedor div, tenemos el primer ítem aquí, que es el contenedor contenido que gusto y el botón ahí, así que vienen rápido. Después está el segundo ítem. Ahora, por defecto, todos
los artículos dentro
del contenedor flex
tienen que ser de orden cero. Así que podemos, vamos a
apuntar a estos correos aquí, y lo vamos a poner rápido. Y podemos hacerlo de
dos maneras distintas. Podemos o bien reducir el
orden de este EMS que cero. Así es como
lo vamos a poner antes del cuadro de texto de aquí, como el contenido del contenedor. Ahora, el
conducto contenedor lo consiguió cayó de orden
cero y va
a ser como menos uno, que es menor que cero. Entonces va a aparecer rápido. Además, podemos darle a esto el contenido del contenedor si modo
hola que cero. Así va a ser más grande que el orden
del héroe EMS, que es cero por defecto. Entonces vamos a apuntar a
la imagen de héroe y darle a esto el orden
de menos uno, así que eso será menor que
cero. Entonces hagámoslo. Héroe sólo lo va a poner
en la siguiente línea aquí. Hola correos electrónicos. Y ahí hay que mantener el mismo orden de
menos, guardar, y ahora EU viene rápido, luego está el sabor. Bien, así que hagámoslo
aún más, más pequeño. Y como puedes ver esa imagen, este tipo de desbordarla. Tan caliente que voy a hacer
es que solo voy a agregar el pelo EMS
como imagen de héroe. Y vamos a apuntar a la tecnología EMS, especialmente para la MS
Y vamos a
darle a esto un OID máximo
al cien por ciento, así que ya no va
a sobrevolar. Entonces esta es nuestra sección de héroes. Y se ve bien. Además, puede reducir un
poco
el tamaño de fuente para esta pantalla de
menor tamaño. Pero ese no es el punto aquí. Sólo vamos a
ver como el orden los y otros
elementos flexibles y propiedades. Así que ahora esto es totalmente receptivo
en pantalla de mayor tamaño. Que los gustos vienen rápido, luego están las imágenes. Y si hacemos que el tamaño de la
pantalla sea menor, va a ser de
la manera opuesta. Por lo que el EMS cuenta rápido
después del punto de ruptura, que es de 1,270 píxeles. Y luego los EMS vienen rápido. Entonces esto es todo
acerca de este proyecto. Espero que te haya gustado y te
vea en el siguiente video.
12. Distribución de espacios adicionales: flexión: En este video,
hablemos de que crecen los copos. Entonces como puedes ver aquí, inserta el contenedor de frases. Tenemos cuatro artículos diferentes y sólo
están tomando todo
lo que necesitan. Los otros respetos,
el pelo es libre. Entonces estos son los
espacios vacíos y los copos crecen. Al usar flex grow, en realidad
podemos usar
los gastos adicionales. Entonces veamos cómo podemos hacer eso. Por defecto, todos los elementos llamados
flex por defecto crecen cero. Entonces el valor por defecto de
la frase crecer es cero. Ahora bien, si le decimos a un artículo o
elemento en particular un
tipo diferente de lugar crecer, va a tomar
el negocio de las radiografías. Entonces así es como
va a funcionar. Entonces, apuntemos a un ítem
en particular, como el ítem cuatro. Si le damos una frase a esto, crezca sobre lo que va a pasar. Ahora por defecto, todos
los demás elementos, como el ítem en la
tercera frase crecieron cero. Entonces no van
a tomar un estrés versus
solo van a tomar
todo lo que necesiten. Pero ahora el artículo para la frase
Kata creció y el grupo de amigos es sobre
el exceso de negocios, ¿de acuerdo? Ahora, como tiene puesto el grupo de
frases, así que va a llevar
todo el SPSS extra. Así que vamos a guardarlo. Y como pueden ver, esto va a llevarse todas
estas piezas que ha vivido. Ahora, podemos dividir
los espacios de estado entre múltiples elementos flexibles. ¿Cómo podemos hacer eso? Entonces este artículo para Dios, si meten la pata en este
objetivo y en la fuga. Entonces digamos el punto
dos, el segundo término. Y vamos a darle a
esto una frase de tres. Entonces ahora lo que
va a pasar es que vamos a
comentar esto. Entonces este es el autobús expreso y éste se va a
dividir en cuatro partes. Entonces la tres porción de
la cuatro versión se va a dar al segundo ítem porque obtuvo esa
frase árbol de crecimiento. Esa porción de descanso se le
va a dar
al artículo porque se le
dio una hojuela en la que creció. Entonces solo voy
a descomentar esto. Y como pueden ver, todos estos espacios se han dado al cuarto y
al segundo ítem. El segundo ítem obtuvo
un grupo de fase tres. Por lo que va a tomar la porción de las
tres cuartas partes de los espacios y el fotón
se puso sólo en porción. Entonces, si apuntamos el
artículo aquí y mantenemos este el mismo
valor que el artículo para. Así que por favor crezca en el artículo para el artículo uno obtendrá
la cantidad similar. Y ahora en este caso, se va a
dividir entre cinco partes porque en dos más tres, eso significa cinco
en porción o el no apto especialmente
se le dará al ítem para la misma persona o
lo mismo especialmente se dará
al artículo encendido y tres quinta porción se
le dará al segundo ítem. El tercer elemento no
tiene ninguna bandera crecer ahí, por lo que captó el valor
predeterminado de cero. Y sólo va a tomar
tanto es porque necesita. Esto es todo
sobre los copos crecen.
13. Alinear un artículo particular de manera diferente: align-self: Bien, ahora
hablemos del celular de la aerolínea. Entonces ya hemos
hablado de los ítems align. Entonces los elementos align se aplican en el contenedor de frases
o en el elemento padre. Pero las ventas de la aerolínea
se van a aplicar sobre el elemento hijo
de los artículos de copos. Entonces para demostrar esto, solo
voy a descomentar
la altura del ítem. Ahora por defecto, cogió el align items es gustos
ahí por lo que está tictac. Todo lo explícito puede tener
a lo largo del eje transversal porque los artículos de la aerolínea
a lo largo de la cruz existen. ¿Bien? Ahora digamos que vamos al centro de artículos de
aerolínea y la aerolínea vende solo
arco a lo largo del eje transversal. Entonces aquí, todos los elementos
flakes obtuvieron el centro align items
porque hemos aplicado los elementos align
con el div contenedor, que es el contenedor de frases. Ahora, digamos que queremos una aerolínea de
artículos por separado. Entonces, ¿cómo podemos hacer eso? Entonces para hacer eso, está el auto de la aerolínea. Entonces, mediante el uso de celdas de lente, podemos apuntar a un elemento flex
en particular y alinearlo por separado. Entonces digamos que tenemos los
terceros artículos y el pelo, y queremos alinearlo manera diferente que el
resto de los artículos. Entonces hagámoslo. Vamos a apuntar al árbol de artículos
y darle una celda alineada. Y el palacio, el valor
por defecto es auto. Eso significa que el artículo tendrá la misma alineación que se le da con un contenedor flexible,
que es el centro. Entonces esto es auto medio. Ahora bien, si quieres
hacerlo de otra manera, también
podemos hacerlo. Entonces apuntemos a los copos. Eso significa que ya
sabes que va a ser en el punto
de partida del eje transversal, que está en la parte superior. Lo hará flex final. Va a estar al
final del eje transversal. Ahora el siguiente que
tenemos aquí es el centro. Y creo que va
a ser lo mismo que antes, porque este es el centro. También si quieres
expresarlo a través del, lo largo del eje transversal. Entonces también puedes hacer eso. Presionemos Guardar. Lo conseguimos. También. Podemos usar la línea base aquí. Entonces estos son los valores. Por lo que podemos usar con
las ventas de la aerolínea para alinear artículos
por separado que el resto de los artículos que se van
a alinear mediante
el uso de la propiedad align items
con el contenedor de copos. Así que también es muy útil cada vez que vas a
crear algún tipo de tarjetas. Entonces digamos que queremos LAN tarjeta NIC por separado
dentro del contenedor. Entonces esto es todo
sobre el yo de la aerolínea.
14. Cómo cambiar el tamaño predeterminado por flex: Ahora hablemos de
la base flex. No creo que lo
vayamos a usar en
lo real todos los positivos
o en la vida real. Pero hay que aprender que
sólo voy a borrarlo y digamos que también
quitó la altura. En realidad, sólo voy a
guardarlo pero alinear los elementos. Hagamos que sea flex start. La base fija va
a ser utilizada para dar su elemento flex separado
y el tipo separado de aceite. O espacian que puede
tener a lo largo del eje x. Entonces digamos que aquí vamos a
apuntar al segundo
ítem, el ítem dos. Y tenemos algunos espacios
extra, ¿verdad? Entonces digamos que
vamos a darle el artículo a una altura del 50 por
ciento. ¿Cómo podemos hacer eso? Podemos hacer eso
usando la base flex. Y podemos dar ya sea un valor de píxel o un valor
porcentual en todo. Pero el valor por defecto de
la base flex es auto. Entonces esto va a tomar
tantas necesidades específicas. Y según los copos, alinee los elementos o sí
justifica el contenido. Este es el valor predeterminado. Si quieres darle un tipo
separado de valores como en persona denso
en 50 por ciento, va a tomar el 50 por
ciento de todo el espacio. Digamos que conseguimos
más valores que eso como en 100%. Entonces se va a pasar a la siguiente línea
porque los ingenieros para
obtener el 100% a lo largo de
las salidas de escamas, que es esto existe. Entonces probémoslo con
algunas otras propiedades aquí, como el ítem tres, lo siento, aquí lo llamamos punto. Bien, vamos a darle a esto una base de copos del 50
por ciento. Vamos a ahorrar. Va a retomar, sólo
voy a reducir un
poco como 48 fases. Así que en realidad podemos poner
dos artículos dentro de eso. Además, vamos a dar el artículo
por el mismo amarillo. En realidad, creo que necesitamos
reducirlo más que eso. Como 45 no se arca. Nuevamente, nuestro inicio. Si quieres hacer un layout
complejo como este, podemos usar la base de la frase, pero creo que esto no es muy práctico porque en el caso de
este tipo de layout complejo, siempre
podemos usar la grilla
CSS para eso, pero es mejor
saber otras cosas. Bien, así que esto es todo
sobre los pases de fase. Ver en el siguiente video.
Sofiullah Chowdhury, Web Developer & UI/UX Designer
