Veamos ahora el ejemplo de Column drop pero con Flex Box abrimos el índex y botón derecho para abrirlo
con Live Server de nueva cuenta.
En esta parte de aquí en el móvil está bien.
Las columnas se colocan una debajo de otra.
De eso trata Column drop pero vamos a abrir esta Helesponto CSS y voy a colocar en lo que viene siendo
este contenedor que vendría siendo el contenedor de los aceites del Main que iba a colocar con un drop
Flex y vamos a escribir el selector de nueva cuenta aprobaron media y media Minuit y lo voy a poner
en 480 píxeles y aquí voy a colocar mi selector.
Lo primero que hacemos es colocar display Flex o habilitar Flex Box en lo que viene siendo ya el contenedor.
Ahora en este dispositivo un poco más pequeño voy a abrir lo que viene siendo Crom developer tools.
Luego más pequeño tenemos las tres columnas pero en esta parte de quien aparquemos encima en unos con
otros los que vamos a hacer es definirle un ancho a cada uno de estos elementos puedes ver que tenemos
un contenido principal que va a colocar punto contenido principal y también voy a seleccionar primera
y segundo salvar la primera y segundo salvar vamos a tener segunda segunda salvar.
Segunda aquí y aquí va a colocar Justified contén como vimos anteriormente yo estoy frecuenten space
between y al menos el contenido principal y la primera me gustaría que tomaran Mitad y mitad mitad y
mitad.
Aquí lo podríamos hacer de la siguiente forma como van a tener el mismo equipo de poner unas Koma Primera
y lo vamos a colocar un flex Basis el Calc 50 por ciento menos y digamos un ram muy importante recuerda
entre el menos y el espacio aquí es importante de otra forma te va a marcar un error y también se recuerdas.
Bueno si ponemos 50 por ciento 1 y 50 por ciento otro pues esta se va a empujar hacia la derecha por
lo tanto flaquísima aquí Lexmark Gurabo y guardamos cambios y abrimos Krumm y puede ser que tenemos
dos columnas arriba y la otra aparece en la parte inferior se va viendo bien tenemos dos columnas y
en la parte más pequeña que aquí tengo que abrir lo que viene siendo developer tools tenemos tres columnas
entonces en un dispositivo más grande me gustaría tener tres columnas aquí no Vatel no va a requerir
nada ya que por default un DIV va a tener todo el ancho que haya disponible media web para un segundo
mi Cuadri 7 6 8 pixeles y este de aquí se mantiene esta parte de aquí se hereda lo que viene siendo
el siguiente de acuerdo y no lo requerimos y lo que voy a hacer aquí es copiar estos electores también
la de segunda y voy a colocar un flex 1 si recuerdas Flex 1 tomaba este toma tres argumentos o tres
parámetros tres valores aquí el primero es cuánto va a crecer va a crecer al factor de 1 como todos
crecen el factor de 1 van a tener el mismo tamaño si le pones un 1 aquí eso quiere decir que también
tenga la habilidad de hacerse más pequeño lanza a poner o no puedes poner 1 y el siguiente es la base
podría ser 33.3 por ciento porque queremos que cada uno mida lo mismo que puede ser que nos da el resultado
correctamente.
Ahora en este caso no tenemos la separación entre cada una de las columnas eso pasa porque como crece
y toma todo el espacio disponible llena incluso ese espacio si deseas tener esa parte tienes que ponerle
cero en ambos para que no crezca tampoco se haga más pequeño pero sí tome la base aquí sería Calc 33.3
por ciento menos digamos dos RAM para tener un poco de separación aquí es muy importante si le pones
un 1 aquí va a crecer aunque tengas una base definida vas a crecer porque eso es lo que hace le dice
bueno si hay espacio tú crece y toma todo lo que hay disponible.
Pero si le agregas cero cero lo puedes pasar como base un tamaño como si fueran Wirtz y puedes ver que
queda de esta forma.
Así es como hacen los frameworks por ejemplo Fondation y vostra.
Así es como van definiendo Hungria y con eso está listo el Column drop con Flags Box puedes ver que
tenemos tres columnas un poco más pequeño tenemos dos columnas y una abajo y finalmente en un dispositivo
más pequeño tenemos las tres columnas en el siguiente vídeo veamos lo que viene siendo consigue ver
si quedamos como elaborar un diseño que va a tener un 6 para un lado así que veamos el siguiente vídeo.