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:
- Expande el contenedor horizontalmente, no verticalmente (como el diseño de Pinterest).
- Requiere que el contenedor tenga una altura fija, para que los artículos sepan dónde envolver.
- 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
orderpara reorganizar su diseño (como en las consultas de medios), este método puede eliminar esa opción. -
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.
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/