w3schools tag tab page color change javascript css css3 flexbox pinterest

javascript - tag - title of page html



¿Es posible que los elementos flexibles se alineen estrechamente con los elementos que están encima de ellos? (5)

Este es, en efecto, el diseño de Pinterest. Sin embargo, las soluciones que se encuentran en línea están envueltas en columnas, lo que significa que el contenedor sin darse cuenta crece horizontalmente. Ese no es el diseño de Pinterest, y no funciona bien con contenido cargado dinámicamente.

Lo que quiero hacer es tener un montón de imágenes de ancho fijo y altura asimétrica, dispuestas horizontalmente pero envueltas en una nueva fila cuando se cumplen los límites del contenedor de ancho fijo:

¿Puede Flexbox hacer esto, o tengo que recurrir a una solución JS como Masonry?

En lugar de flexbox , recomiendo usar columns para cuadrículas como esta. Como puede ver, el espacio en las imágenes inferiores puede ser mejor, pero para una solución CSS nativa, creo que es bastante ordenado. No más JS:

.container { max-width: 900px; width: 100%; margin: 0 auto; } ul { margin: 0; padding: 0; } ul li { list-style: none; font-size: 0; } .portfolio ul { -moz-column-count: 4; -webkit-column-count: 4; column-count: 4; -moz-column-gap: 3px; -webkit-column-gap: 3px; column-gap: 3px; } .portfolio ul:hover img { opacity: 0.3; } .portfolio ul:hover img:hover { opacity: 1; } .portfolio ul li { margin-bottom: 3px; } .portfolio ul li img { max-width: 100%; transition: 0.8s opacity; }

<section class="container portfolio"> <ul> <li><img src="http://lantosistvan.com/temp/freecodecamp/IMG_2959-1400px.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/lantosistvan-portfolio-010.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/IMG_6188-dng-k.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/20151220-csaladi-peregi-046-k.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/20151230-csalad-szalai-0194-k.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/lantosistvan-portfolio-001(1).jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/160528171819-portfolio.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/160528171829-portfolio.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/160528171938-portfolio.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/160528171953-portfolio.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/160528194754-portfolio.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/160528184948-portfolio.jpg" alt="" /></li> </ul> </section>

Flexbox es un sistema de diseño "1-dimensional": puede alinear elementos a lo largo de líneas horizontales O verticales.

Un verdadero sistema de cuadrícula es "bidimensional": puede alinear elementos a lo largo de líneas horizontales Y verticales. En otras palabras, las celdas pueden abarcar columnas y filas, lo que flexbox no puede hacer.

Es por eso que flexbox tiene una capacidad limitada para construir redes. También es una razón por la cual el W3C ha desarrollado otra tecnología CSS3, Grid Layout (ver más abajo).

En un contenedor flex-flow: row wrap , los elementos flexibles deben ajustarse a filas nuevas.

Esto significa que un elemento flexible no puede ajustarse debajo de otro elemento en la misma fila .

Observe arriba cómo div # 3 se ajusta debajo de div # 1 , creando una nueva fila. No puede envolverse debajo del div # 2 .

Como resultado, cuando los elementos no son los más altos de la fila, queda espacio en blanco, creando huecos antiestéticos.

Crédito de imagen: Jefree Sujit

Solución de column wrap

Si cambia a flex-flow: column wrap , los elementos flexibles se apilarán verticalmente y un diseño en forma de cuadrícula es más alcanzable. Sin embargo, un contenedor de dirección de columna tiene tres problemas potenciales desde el principio:

  1. Expande el contenedor horizontalmente, no verticalmente (como el diseño de Pinterest).
  2. Requiere que el contenedor tenga una altura fija, para que los artículos sepan dónde envolver.
  3. Al escribir estas líneas, tiene una deficiencia en todos los principales navegadores donde el contenedor no se expande para acomodar columnas adicionales .

Como resultado, un contenedor con dirección de columna puede no ser factible en muchos casos.

Otras soluciones

  • Agregar contenedores

    En las dos primeras imágenes anteriores, considere envolver los artículos 2 y 3 en un recipiente separado. Este nuevo contenedor puede ser hermano del elemento 1. Hecho.

    Aquí hay un ejemplo detallado: diseño del teclado de la calculadora con flexbox

    Una desventaja que vale la pena resaltar: si desea utilizar la propiedad de order para reorganizar su diseño (como en las consultas de medios), este método puede eliminar esa opción.

  • Albañilería Desandro

    Masonry es una biblioteca de diseño de cuadrícula de JavaScript. Funciona colocando los elementos en una posición óptima según el espacio vertical disponible, algo así como piedras de albañil en una pared.

    fuente: http://masonry.desandro.com/

  • Cómo construir un sitio que funcione como Pinterest

    [Pinterest] es realmente un sitio genial, pero lo que me parece interesante es cómo se presentan estos tableros ... Entonces, el propósito de este tutorial es recrear nosotros mismos este efecto de bloque receptivo ...

    fuente: https://benholland.me/javascript/2012/02/20/how-to-build-a-site-that-works-like-pinterest.html

  • Módulo de diseño de cuadrícula CSS Nivel 1

    Este módulo CSS define un sistema de diseño bidimensional basado en la cuadrícula, optimizado para el diseño de la interfaz de usuario. En el modelo de diseño de cuadrícula, los elementos secundarios de un contenedor de cuadrícula se pueden colocar en ranuras arbitrarias en una cuadrícula de diseño predefinida de tamaño flexible o fijo.

    fuente: https://drafts.csswg.org/css-grid/

    Ejemplo de diseño de cuadrícula: diseño de mampostería solo CSS pero con elementos ordenados horizontalmente

Lo que quiere se puede lograr de 3 a 2 formas, en cuanto a CSS:

1. flexbox:

.parent { display: flex; flex-direction: column; flex-wrap: wrap; max-width: {max-width-of-container} /* normally 100%, in a relative container */ min-height: {min-height-of-container}; /* i''d use vh here */ } .child { width: {column-width}; display: block; }

2. columnas CSS

(Esta solución tiene la ventaja muy clara de column-span incorporado, bastante útil para los títulos). La desventaja es ordenar elementos en columnas (la primera columna contiene el primer tercio de los elementos, etc.). Hice un jsFiddle para esto.

.parent { -webkit-columns: {column width} {number of columns}; /* Chrome, Safari, Opera */ -moz-columns: {column width} {number of columns}; /* Firefox */ columns: {column width} {number of columns}; } .child { width: {column width}; } /* where {column width} is usually fixed size * and {number of columns} is the maximum number of columns. * Additionally, to avoid breaks inside your elements, you want to add: */ .child { display: inline-block; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid-column; }

3. Complemento de albañilería

Posicionamiento absoluto después de calcular los tamaños de elementos renderizados, a través de JavaScript (complemento de albañilería).

Puede lograr el efecto de mampostería según su captura de pantalla, pero ha establecido dinámicamente la altura del div externo

html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } .item-list { max-width: 400px; border: 1px solid red; display: -ms-flexbox; -ms-flex-direction: column; -ms-flex-wrap: wrap; display: flex; flex-direction: column; flex-wrap: wrap; height: 100vw; } .item-list__item { border: 1px solid green; width: 50%; }

<div class="item-list" > <div class="item-list__item"> Is we miles ready he might going. Own books built put civil fully blind fanny. Projection appearance at of admiration no. As he totally cousins warrant besides ashamed do. Therefore by applauded acuteness supported affection it. Except had sex limits county enough the figure former add. Do sang my he next mr soon. It merely waited do unable. </div> <div class="item-list__item"> Is we miles ready he might going. Own books built put civil fully blind fanny. Projection appearance at of admiration no. As he totally cousins warrant besides ashamed do. </div> <div class="item-list__item"> Is we miles ready he might going. Own books built put civil fully blind fanny. Projection appearance at of admiration no. As he totally cousins warrant besides ashamed do. Therefore by applauded acuteness supported affection it. Except had sex limits </div> <div class="item-list__item"> Is we miles ready he might going. Own books built put civil fully blind fanny. Projection appearance at of admiration no. As he totally cousins warrant besides ashamed do. </div> <div class="item-list__item"> Is we miles ready he might going. Own books built put civil fully blind fanny. Projection appearance at of admiration no. As he totally cousins warrant besides ashamed do. Therefore by applauded acuteness supported affection it. Except had sex limits </div> </div>

el enfoque de column parece un buen compromiso si establece column-width través de unidades vmin o vmax y suelta column-count (primer fragmento), display:grid y vmin también es una opción para el futur (segundo fragmento).

fragmento inspirado en la respuesta de @Lanti.

prueba de demostración con vmin

.container { } ul { margin: 0; padding: 0; } ul li { list-style: none; font-size: 0; } .portfolio ul { -webkit-column-width:50vmin; -moz-column-width:50vmin; column-width:50vmin; -webkit-column-fill:balance; -moz-column-fill:balance; column-fill:balance; -webkit-column-gap: 3px; -moz-column-gap: 3px; column-gap: 3px; } .portfolio ul:hover img { opacity: 0.3; } .portfolio ul:hover img:hover { opacity: 1; } .portfolio ul li { margin-bottom: 3px; } .portfolio ul li img { max-width: 100%; transition: 0.8s opacity; }

<section class="container portfolio"> <ul> <li><img src="http://lantosistvan.com/temp/freecodecamp/IMG_2959-1400px.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/lantosistvan-portfolio-010.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/IMG_6188-dng-k.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/20151220-csaladi-peregi-046-k.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/20151230-csalad-szalai-0194-k.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/lantosistvan-portfolio-001(1).jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/160528171819-portfolio.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/160528171829-portfolio.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/160528171938-portfolio.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/160528171953-portfolio.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/160528194754-portfolio.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/160528184948-portfolio.jpg" alt="" /></li> </ul> </section>

un enlace entre otros https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/

display:grid coud también lo hace fácil con autocompletar, pero requerirá establecer un valor de intervalo en la imagen más alta para que las filas y columnas puedan incorporarse

.container {} ul { margin: 0; padding: 0; } ul li { list-style: none; font-size: 0; } .portfolio ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(50vmin, 1fr)); grid-gap: 5px; grid-auto-rows: minmax(10px, 1fr); grid-auto-flow: dense; } .portfolio ul:hover img { opacity: 0.3; } .portfolio ul:hover img:hover { opacity: 1; } .portfolio ul li { margin-bottom: 3px; } .portfolio ul li img { max-width: 100%; transition: 0.8s opacity; } li { border: solid blue; grid-row-end: span 1; display: flex; align-items: center; background: lightgray; } li:nth-child(1), li:nth-child(3), li:nth-child(6), li:nth-child(7), li:nth-child(8), li:nth-child(9), li:nth-child(10), li:nth-child(11) { border: solid red; grid-row-end: span 2 }

<section class="container portfolio"> <ul> <li><img src="http://lantosistvan.com/temp/freecodecamp/IMG_2959-1400px.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/lantosistvan-portfolio-010.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/IMG_6188-dng-k.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/20151220-csaladi-peregi-046-k.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/20151230-csalad-szalai-0194-k.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/lantosistvan-portfolio-001(1).jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/160528171819-portfolio.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/160528171829-portfolio.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/160528171938-portfolio.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/160528171953-portfolio.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/160528194754-portfolio.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/160528184948-portfolio.jpg" alt="" /></li> </ul> </section>

puedes ver https://css-tricks.com/snippets/css/complete-guide-grid/