Est-il possible pour les éléments flex de s'aligner étroitement sur les éléments au-dessus d'eux?
il s'agit, en effet, de la disposition Pinterest. Cependant, les solutions trouvées en ligne sont enveloppées dans des colonnes, ce qui signifie que le conteneur croît par inadvertance horizontalement. C'est-à-dire pas la mise en page Pinterest, et il ne fonctionne pas bien avec du contenu chargé dynamiquement.
ce que je veux faire, c'est avoir un tas d'images de largeur fixe et de hauteur asymétrique, disposées horizontalement mais enveloppant dans une nouvelle rangée lorsque les limites de la largeur fixe conteneur satisfait:
est-ce que flexbox peut faire cela, ou dois-je recourir à une solution JS comme la maçonnerie?
5 réponses
Flexbox est un système de mise en page" 1-dimensionnel": il peut aligner des éléments le long de lignes horizontales ou verticales.
un véritable système de grille est" bidimensionnel": il peut aligner des éléments le long de lignes horizontales et verticales. En d'autres termes, les cellules peuvent s'étendre sur des colonnes et des lignes, ce que flexbox ne peut pas faire.
C'est pourquoi flexbox a une capacité limitée pour la construction de grilles. C'est aussi une raison pour laquelle le W3C a développé un autre CSS3 technologie, Grid Layout (voir ci-dessous).
dans un conteneur souple avec flex-flow: row wrap , les articles flexibles doivent être enveloppés dans un nouveau lignes .
cela signifie que un article souple ne peut pas être emballé sous un autre article de la même rangée .
avis au-dessus de comment div #3 wraps ci-dessous div #1 , créant une nouvelle rangée. Il ne peut pas s'enrouler sous div #2 .
par conséquent, lorsque les objets ne sont pas les plus hauts de la rangée, l'espace blanc reste, créant des lacunes disgracieuses.
image credit: Jefree Sujit
column wrap Solution
si vous passez à flex-flow: column wrap , les éléments flex s'empilent verticalement et un agencement en grille est plus réalisable. Toutefois, un conteneur à sens de colonne présente trois problèmes potentiels dès le départ:
- il étend le conteneur horizontalement, Non verticalement (comme la disposition de Pinterest).
- il exige que le conteneur ait une hauteur fixe, de sorte que les articles savent où les envelopper.
- à la date d'écriture, il a une déficience dans tous les principaux navigateurs où le conteneur ne se dilate pas pour accueillir les colonnes supplémentaires .
par conséquent, un conteneur à sens de colonne peut ne pas être réalisable dans de nombreux cas.
Autres Solutions
-
ajouter les conteneurs
dans les deux premières images ci-dessus, envisagez d'emballer les articles 2 et 3 dans un contenant distinct. Ce nouveau contenant peut être apparenté à l'article 1. Faire.
voici un exemple détaillé: Calculatrice configuration du clavier avec flexbox
un inconvénient de valeur surlignage: si vous souhaitez utiliser la propriété
orderpour réorganiser votre mise en page (comme dans les requêtes médias), cette méthode peut éliminer cette option. -
Masonry est une bibliothèque de mise en page de grille JavaScript. Il fonctionne en plaçant les éléments dans une position optimale en fonction de la disponibilité espace vertical, un peu comme un raccord de maçon les pierres d'un mur.
source: http://masonry.desandro.com/
-
comment construire un Site qui fonctionne comme Pinterest
[Pinterest] est vraiment un site cool, mais ce que je trouve intéressant, c'est comment ces pinboards sont disposés... De sorte que le le but de ce tutoriel est de recréer nous-mêmes cet effet de bloc responsive...
source: https://benholland.me/javascript/2012/02/20/how-to-build-a-site-that-works-like-pinterest.html
-
CSS Grid Layout Module niveau 1
Exemple de grillece module CSS définit un système de mise en page bidimensionnel basé sur une grille, optimisé pour la conception de l'interface utilisateur. Dans le modèle de disposition de grille, les enfants d'un conteneur de grille peuvent être positionnés dans des fentes arbitraires dans une grille de disposition prédéfinie flexible ou de taille fixe.
: CSS-seulement de maçonnerie mise en page, mais avec des éléments commandés à l'horizontale
ce que vous voulez peut être réalisé en 3 2 voies, CSS Sage:
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. Colonnes CSS
(cette solution a le très soignée avantage de column-span - très pratique pour les titres). L'inconvénient est d'ordonner les articles dans les colonnes (la première colonne contient le premier tiers des articles et donc sur...). J'ai fait un jsFiddle pour ceci.
.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. Plugin de maçonnerie
positionnement absolu après le calcul de rendu d'élément de tailles, via JavaScript (maçonnerie plugin).
l'approche column semble un bon compromis si vous positionnez column-width via vmin ou vmax unités et drop column-count (premier snippet), display:grid et vmin est également une option pour le futur (deuxième snippet).
extrait inspiré de la réponse de @Lanti.
le test de la démo avec 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 lien entre autres https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/
display:grid pourrait le faire aussi facile avec auto-remplir, mais exigera de définir une valeur de portée à l'image la plus haute de sorte que les lignes et les colonnes peuvent inbricate
.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>vous pouvez voir https://css-tricks.com/snippets/css/complete-guide-grid/
vous pouvez obtenir l'effet de maçonnerie selon votre capture d'écran, mais vous avez défini la hauteur de la div externe dynamiquement
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> au lieu de flexbox , je recommande d'utiliser colonnes pour les grilles comme celle-ci. Comme vous pouvez le voir, l'espacement sur les images du bas peut être meilleur, mais pour une solution natif CSS je pense que c'est assez soigné. Plus de 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>