Este será el siguiente templete que estaremos realizando puedes ver que lo que es el jede eres igual
a lo que es la página anterior y tenemos la parte de los anuncios que ya tenemos hecha alguna parte
de ésta estaremos viendo algunos ajustes que podemos hacer primer paso.
Puedes ver que se dedicaría a quien anuncio el archivo limarse anuncios HTML.
Por lo tanto aquí aún sale el nuevo archivo.
Anuncios punto HTML.
Abrimos todo lo que nosotros nos pegamos acá y el primer paso es que voy a quitar lo que viene siendo
todo este contenido de esta página.
Todo esto que está aquí lo vamos a quitar.
Entonces puedes ver que si abrimos el proyecto recargamos nada más tenemos el deber y el furor.
Ahora si abrimos el índex esa parte también ya la tenemos definida.
Puede ser que Xmen y scrub todo el mes lo vamos a copiar.
Aniquilamos apegar esta parte en un poco mi código y que de esta forma recargamos y puedes ver que aparecen
las diferentes casas pero aparece este botón de ver todas esas lo vamos a eliminar un poco de scroll
y lo vamos a quitar no es necesario.
Ahora esta página tiene tres o se muestran tres son las que tenemos en la página principal solamente
mostramos tres pero por ejemplo aquí tenemos que mostrar más propiedades el que tenemos por ejemplo
seis en venta así que tenemos que crear las demás.
Entonces es muy sencillo en realidad porque ya tenemos todo el código entonces aquí tenemos este anuncio
y si recuerdas había mencionado la importancia por ejemplo de comentar tu código aquí vamos a poner
anuncios decir que este cierra el anuncio y este viene cerrando contenido anuncio contenido
contenido anuncio o a colapsar esto es más fácil de ver si copiamos todo el anuncio desde el cierre
del libro hasta acá y vamos a pegarlo aquí es que el primer copia y después vamos a pegarlo nuevamente
tener una copia más.
Llevamos dos y una copia más a los tres entonces de esa forma tenemos seis veces esta clase de anuncio
nos da un poco de scroll si es que tenemos anuncio 3 Vamos a ver aquí y aquí es donde se empieza a repetir
ponemos anuncios 4 y aquí vamos a poner anuncio casa de lujo y en el H3 vamos a colocar casa fuera de
la ciudad
y vamos a tener casa con alberca y acabados de lujo ponerlos fuera de la ciudad y vamos a cambiar un
poco el precio de digamos aquí dos millones y por ejemplo aquí en baños ponemos dos algo que se así
un poco diferente en realidad hacinamiento dos dormitorios cinco consensar un poco de scroll.
Después vamos a crear que anunció 5 este va a decir casa frente al bosque casa frente al bosque y aquí
casa con alberca
frente al bosque y también otra vez excelente oportunidad digamos esta tres y medio con tres baños está
bien estacionamiento 2 y 4 está bien croar también y vamos a crear la última que vamos a poner anuncios
6 nada más en los archivos del curso coloqué 6 imágenes después del anuncio 1 al 6 se agrega son 7 pues
no existe esa esa imagen que no se casa con la alberca de nueva cuenta y vamos a manejarlo así.
Digamos que estaba de 4 y vamos a cambiar aquí nada más un poco entonces dejamos de esta forma igual
vamos a guardar cambios y vamos a ver algo puedes ver que aparecen todas las casas de esta forma entonces
tenemos que hacer algunos ajustes en la hoja de estilos vamos a ir a ver aquí esta es y vamos a buscar
anuncios entonces que tenemos aquí los anuncios y esto aquí está pasando porque por ejemplo si guardamos
cambios puedes ver que el contenido se encoge se está haciendo más pequeño existe la propiedad en flexivos
que se conoce como Flex Frink.
Eso quiere decir este contenido se debe de hacer más pequeño si es posible y usualmente está como 1
es decir que sean de foll que si lo pones 0 eso va a ser que no se encoja y siempre toma el tamaño de
la base es decir 33.3 por ciento que nos permite crear tres columnas menos un Reem después del Flex
Frink solución a este problema ahora tenemos otro problema porque tengo este scroll hacia los lados.
A mí me gustaría que tuviera tres columnas y luego se posicionara a las de más abajo para ello Flex
Box existe una propiedad que tienes que pasarla en el padre.
Anteriormente el Drink es para que el tamaño se haga más pequeño grande se lo pasamos al hijo porque
es el que define su tamaño pero éste tiene que ser desde el padre.
Entonces podemos flexiva que es la propiedad y por Deftones no Group es decir que no lo haga pero nosotros
queremos que sí lo haga por lo tanto ponemos un rap y puede ser que el contenido se posiciona de esta
forma.
Ahora puedes ver que por ejemplo aquí entre estos dos el de arriba y el de abajo está muy pegado no
hay separación por lo tanto hay quien anunció Vamos a ponerle separación hacia afuera.
Margin Boron 2 Greim es solo agregar separación de esta forma puede ser que se va viendo bastante bien.
Me gusta mucho cómo está quedando ahora por ejemplo si abrimos lo que viene siendo anuncio aquí tenemos
esta propiedad de Frick Fleck Streeck y Flex Basis.
Existe algo que se conoce como un surfean es decir una versión corta existe algo que se llama también
Flex grow.
Por ejemplo si le pones uno el contenido crece es decir el contenido tiene una base de digamos de 300
píxeles pero si le pones CFL accedió a uno.
Si el contenido puede va a crecer es decir si hay espacio disponible va a crecer por eso se llama Flex
box porque es una caja flexible puede crecer o hacerse más pequeña.
Al igual que el Frink si lo dejas en cero entonces no crece y se queda el tamaño de la base.
Ahora estos tres se pueden colocar en uno solo que se conoce como Flex y se pasan en este orden el Grog
lo vamos a dejar como cero el lo vamos a dejar como cero y queremos que solamente tome nuestra base
que vendría siendo esta aquí entonces puedes ver que queda todo en una sola línea y el resultado es
exactamente el mismo.
Entonces puedes ver si has visto algún ejemplo con Flex box te confundían poco recuerda Flex duro para
que el contenido crezca si es posible Fleck stream para que el contenido se haga más pequeño si es posible
y es su base.
Si no quieres que se haga más pequeño más grande como cero ambos y solamente dar una base así es como
se hacen los frameworks como vostra así están definidos.
Así es como tienen sus columnas que se van viendo bastante bien y con eso está lista también en sección.
Ahora vamos a ver lo que viene siendo cada una de estas propiedades tenemos diferentes propiedades aquí
tenemos ahí solamente crearemos un template no le veo sentido crear los seis son iguales pero puedes
hacerlo como una asignación vamos a ver cuándo dio clic en Ver propiedad que me muestra información
sobre esa propiedad.
Así que veámoslo en el siguiente video.