29071


**高さが異なる要素を、ライブラリを使用せず、レンガ状に隙間なく並べるためにはどうすれば良いでしょうか？**  
・Flexboxでは無理？  
・グリッドシステムでもない？  
・どういうキーワードで検索すれば良い？  
・どこかに基本的な考え方(実装手順)を記したチュートリアルみたいなページはないでしょうか？

* * *

※追記しました

* * *

**幅、高さ**  
・指定なし  
・任意(可変OK)

**順序**  
・付与したい  
・可能ならば左から右へ


CC BY-SA 3.0
2016-09-12T06:09:35.543
28835
2016-09-24T07:22:03.843
2016-09-24T07:22:03.843
7886
7886
question
javascript css
高さが異なる要素をレンガ状に隙間なく並べたいのですが。ライブラリを使用せずに…


CSSだけで2つのやり方があります。  
それとご質問のレイアウトは「Masonry」という名前らしいです。

* * *

`flexbox`は[英語版の同じ質問にやり方](https://stackoverflow.com/a/35097136/4366452)が載ってます、選ばれた回答ではないですが。  
訳しますと（ほぼコピペ）：

  1. 複数列（column）を持ったflexコンテナを作る  

[code]     #flex-container {

      display: flex;
      flex-flow: column wrap;
    }
    
[/code]

  2. 要素の順序が縦になるように並び替える（3列なので3n）
[code]     #flex-container > :nth-child(3n + 1) { order: 1; } /* 1列目 */

    #flex-container > :nth-child(3n + 2) { order: 2; } /* 2列目 */
    #flex-container > :nth-child(3n + 3) { order: 3; } /* 3列目 */
    
[/code]

  3. 最初の列の数の分の要素の前に新規列をかならず入れる
[code]     #flex-container > :nth-child(-n + 3) {

      page-break-before: always; /* CSS 2.1 用 */
      break-before: always;  /* 新しい表記法 */
    }
    
[/code]

[code]

    #flex-container {
      display: flex;
      flex-flow: column wrap;
    }
    
    #flex-container > :nth-child(3n + 1) { order: 1; } /* 1列目 */
    #flex-container > :nth-child(3n + 2) { order: 2; } /* 2列目 */
    #flex-container > :nth-child(3n + 3) { order: 3; } /* 3列目 */
    
    #flex-container > :nth-child(-n + 3) {
      page-break-before: always; /* CSS 2.1 用 */
      break-before: always;  /* 新しい表記法 */
    }
    
    /* ここからは不必要 */
    
    #flex-container > div {
      background: #666;
      color: #fff;
      margin: 3px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 36px;
    }
    
    #flex-container > :nth-child(1) { height: 100px; }
    #flex-container > :nth-child(2) { height: 50px; }
    #flex-container > :nth-child(3) { height: 75px; }
    #flex-container > :nth-child(4) { height: 50px; }
    #flex-container > :nth-child(5) { height: 100px; }
    #flex-container > :nth-child(6) { height: 50px; }
    #flex-container > :nth-child(7) { height: 100px; }
    #flex-container > :nth-child(8) { height: 75px; }
    #flex-container > :nth-child(9) { height: 125px; }
[/code]

[code]

    <div id="flex-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>
[/code]

* * *

もうひとつはCSS3の`column-
count`を使う方法です。こちらも新しくベンダープリフィックスがつきますが、コンテナのスタイルに足すだけなので楽です。`flexbox`の方法と比べると順序が縦方向になるのが問題になるかもしれません。

[code]

    #column {
        -webkit-column-count: 3; /* Chrome, Safari, Opera */
        -moz-column-count: 3; /* Firefox */
        column-count: 3;
        -webkit-column-gap: 0; /* Chrome, Safari, Opera */
        -moz-column-gap: 0; /* Firefox */
        column-gap: 0;
    }
    
    /* ここからは不必要 */
    
    #column > div {
      background: #666;
      color: #fff;
      margin: 3px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 36px;
    }
    
    #column > :nth-child(1) { height: 100px; }
    #column > :nth-child(2) { height: 50px; }
    #column > :nth-child(3) { height: 75px; }
    #column > :nth-child(4) { height: 50px; }
    #column > :nth-child(5) { height: 100px; }
    #column > :nth-child(6) { height: 50px; }
    #column > :nth-child(7) { height: 100px; }
    #column > :nth-child(8) { height: 75px; }
    #column > :nth-child(9) { height: 125px; }
[/code]

[code]

    <div id="column">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>
[/code]

どちらも古いブラウザでは対応していないで、使う前には確認したほうがいいと思います。


CC BY-SA 3.0
2016-09-23T07:02:39.323
29071
2016-09-23T07:27:24.310
2017-05-23T12:38:56.467
-1
3974
28835
answer