web-dev-qa-db-ja.com

フレックスアイテムがそれらの上にあるアイテムにぴったりと揃うことは可能ですか？

これは、事実上、Pinterestレイアウトです。ただし、オンラインで見つかったソリューションは列で囲まれているため、コンテナが意図せず水平に大きくなります。つまり、notPinterestレイアウトであり、動的にロードされたコンテンツではうまく機能しません。

私がやりたいのは、固定幅と非対称の高さの画像の束を持って、水平にレイアウトされているが、固定幅コンテナの制限が満たされたときに新しい行にラップすることです：

flexboxこれを行うか、MasonryのようなJSソリューションに頼らなければなりませんか？

javascriptcsscss3flexboxpinterest
53
Guybrush Threepwood

Flexboxは「1次元」レイアウトシステムです。水平OR垂直線に沿ってアイテムを整列できます。

真のグリッドシステムは「2次元」です。水平および垂直の線に沿ってアイテムを整列できます。つまり、セルは列と行にまたがることができますが、これはflexboxではできません。

これがflexboxがグリッドを構築するための能力に制限があることです。これは W3C が別のCSS3テクノロジーを開発した理由でもありますグリッドレイアウト（以下を参照）。

flex-flow: row wrapを含むflexコンテナでは、flexアイテムは新しいrowsにラップする必要があります。

つまり、フレックスアイテムは、同じ行の別のアイテムの下にラップすることはできません。

enter image description here

上記のdiv＃3がdiv＃1の下にラップして、新しい行を作成することに注意してください。 div＃2の下にラップすることはできません。

その結果、アイテムが行の中で最も高くない場合、空白が残り、見苦しいギャップが生じます。

enter image description here

enter image description here

画像クレジット： Jefree Sujit

column wrapソリューション

flex-flow: column wrapに切り替えると、フレックスアイテムが垂直にスタックされ、グリッドのようなレイアウトがより実現可能になります。ただし、列方向のコンテナーには、すぐに次の3つの潜在的な問題があります。

  1. コンテナを垂直方向ではなく水平方向に拡張します（Pinterestレイアウトのように）。
  2. コンテナの高さを固定する必要があるため、アイテムはどこにラップするかがわかります
  3. この記事の執筆時点では、 コンテナが追加の列に対応するために展開しない であるすべての主要なブラウザに欠陥があります。

その結果、多くの場合、列方向のコンテナは実行不可能な場合があります。

その他のソリューション

36
Michael_B

あなたが望むものはで達成することができます 3 CSS賢明な2つの方法：

1。 フレックスボックス：

    .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. CSSカラム

（このソリューションには、組み込みの column-span -タイトルに非常に便利です）。欠点は、列でアイテムを並べることです（最初の列にはアイテムの最初の3分の1などが含まれます）。このために jsFiddle を作成しました。

    .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.石積みプラグイン

javaScript（石工プラグイン）を介して、レンダリングされたアイテムのサイズを計算した後の絶対配置。

4
Andrei Gheorghiu

columnアプローチは、column-widthvminまたはvmaxユニット経由でドロップcolumn-count（最初のスニペット）、display:gridおよびvminは、futur（2番目のスニペット）のオプションでもあります。

@Lantiの回答からヒントを得たスニペット。

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>

とりわけリンク https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/

display:grid coudにより自動入力も簡単になりますが、行と列を埋めるためにスパン値を最も高い画像に設定する必要があります

.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>

https://css-tricks.com/snippets/css/complete-guide-grid/ を見ることができます

1
G-Cyr

スクリーンショットに従って石積み効果を実現できますが、外側のdivの高さを動的に設定しました

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>
0
David Chelliah

flexboxの代わりに、このようなグリッドには columns を使用することをお勧めします。ご覧のとおり、下の画像の間隔はより良い場合がありますが、ネイティブCSSソリューションの場合はかなりきれいだと思います。これ以上の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>
0
Lanti