9

新しいフレックスボックスレイアウトのみを使用して、pinterestまたはjQuery組積造と同じタイプのデザインレイアウトを取得できるかどうかを知りたいと考えました。これが私が得た限りです：

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
}
.item {
    width: 220px;
    height: 250px;
    margin: 10px auto;
    padding: 0;
    background: #ccc;
}
.item:nth-child(3n+2) {
    background: #aaa;
    height: 400px;
}

PHPループを使用して12個のアイテムを作成しているHTML

<?php
    for ($i=0; $i<=11; $i++) {
        echo '<div class="item"></div>';
    }
?>
4

4 に答える 4

8

それは完全に可能です。

@leopldの元の回答のおかげで、固定の高さに依存しないものを作成することができました。

フレックスコンテナposition: absoluteまたはを作成することによりposition: fixed、使用可能なスペースを動的に埋めることができます。

Codepenへのリンク：http ：//codepen.io/anon/pen/Jpnyj？editors=110 。現時点で必要なすべてのベンダープレフィックスを含めました。

マークアップ

<div class="wrapper">
    <div class="box box-red"></div>
    <div class="box box-blue"></div>
    <div class="box box-pink"></div>
    <div class="box box-purple"></div>
    <div class="box box-green"></div>
    <div class="box box-yellow"></div>
    <div class="box box-brown"></div>
    <div class="box box-red"></div>
    <div class="box box-blue"></div>
    <div class="box box-pink"></div>
    <div class="box box-purple"></div>
    <div class="box box-green"></div>
    <div class="box box-purple"></div>
    <div class="box box-green"></div>
    <div class="box box-yellow"></div>
    <div class="box box-blue"></div>
    <div class="box box-pink"></div>
    <div class="box box-purple"></div>
    <div class="box box-green"></div>
    <div class="box box-yellow"></div>
    <div class="box box-red"></div>
    <div class="box box-brown"></div>
    <div class="box box-blue"></div>
    <div class="box box-red"></div>
    <div class="box box-green"></div>
    <div class="box box-yellow"></div>
    <div class="box box-brown"></div>
</div>

スタイル

body {
    background: black;
}

.wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: column wrap;
    -ms-flex-flow: column wrap;
    flex-flow: column wrap;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
}

.box {
    margin: 5px;
    -webkit-box-flex: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
}

.box-red {
    height: 100px;
    background: red;
}

.box-blue {
    height: 120px;
    background: blue;
}

.box-pink {
    height: 144px;
    background: pink;
}

.box-purple {
    height: 250px;
    background: purple;
}

.box-green {
    height: 200px;
    background: green;
}

.box-yellow {
    height: 20px;
    background: yellow;
}

.box-brown {
    height: 290px;
    background: brown;
}
于 2014-04-10T16:43:52.083 に答える
6

CSS3の列を使用すると、そのレイアウトにかなり近づくことができます。（最近ではないブラウザーでのサポートが不十分であり、将来的に仕様が変更される可能性があることに注意してください。）他の例はFFでは機能しませんでしたが、これは機能します。

HTML：

<div id="wrapper">
    <div id="cols">
        <div class="item">
          <img src="http://placekitten.com/400/700?image=1" />
            <p>0) Craft beer farm-to-table.</p>
        </div>
        <div class="item">
            <img src="http://placekitten.com/400/450?image=2" />
            <p>1) Mollit wolf veniam, leggings art party semiotics Brooklyn High Life sustainable occaecat Banksy actually.</p>
        </div>
        [more items]
    </div>
</div>

CSS：

h1、h2、ul、p {マージン：1rem; }

#wrapper {
    width: 900px;    
    margin: 20px auto;
    padding: 10px;
    outline: solid black 1px;
    background-color: gainsboro;  
}

#cols {
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    column-count: 3;
    column-gap: 10px;
}

.item {
    display: inline-block;
    background: #FEFEFE;
    margin: 0;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
    padding: 10px;
}

.item img {
    width: 100%;
    border-bottom: 1px solid black;
    padding-bottom: 10px;
    margin-bottom: 5px;
}

.item p {
    font-size:small;
    margin: 0;
}

または、完全な例で遊んでください。

于 2013-08-02T20:11:08.537 に答える
3

更新：私の知る限り、Flexboxでこれを行う方法はありません。Flexboxは、垂直方向ではなく、水平方向のレイアウトに関心があります。私は間違っていることが証明されてうれしいですが、それは私がそれを使った限られた経験から集めたものです。詳細を知りたい場合は、この問題について私が見つけた最高の記事は次のとおりです。http: //css-tricks.com/snippets/css/a-guide-to-flexbox/（はい、もちろん、ChrisCoyierです。 。どうやって推測しましたか？）

いずれにせよ、Flexboxでそれを行うことができたとしても、それはFlexboxの目的ではないため、少しハックになります。列を使用してそれを行うためのはるかにクリーンな方法がありCSS3ます。これが例です。

ただし、ブラウザのサポートは最高ではありません。http: //caniuse.com/#search=column%20layout FFは実際にそれぞれをサポートしているため、理由はわかりませんが、この例でもFirefoxをサポートしていないようです。 CanIUseによるとプロパティ。

したがって、要約とTLDR：これを純粋なCSSで実行することは素晴らしいアイデアですが、現時点ではほとんどの実用的な目的では不可能です。JQueryMasonryを使用したほうがよいでしょう。

于 2013-01-10T19:52:37.147 に答える
3

flexboxを使用すれば、それほど面倒なことなく実際にそれを行うことができます。唯一の欠点は、ラッパーのコンテンツを実際にラップするために、ラッパーの絶対的な高さを指定する必要があることです。そうでなければ、それはすべて、終わりのない1つの素晴らしい列に沿って配置されます。

HTML：

<div class="wrapper">
    <div class="red"></div>
    <div class="blue"></div>
    <div class="pink"></div>
    <div class="purple"></div>
    <div class="green"></div>
    <div class="yellow"></div>
    <div class="brown"></div>
</div>

（接頭辞なしの）CSS：

.wrapper {
    background: black;
    display: flex;
    flex-flow: column wrap;
    height: 450px;
    align-items: center;
}

.wrapper > div {
    height: 100px;
    margin: 5px;
    width: 100px;
}

.wrapper > :nth-child(3n+2) {
    border: 2px solid white;
    height: 300px;
}

JSフィドルも作ったので、結果を直接見ることができます。

ただし、一言で言えば、ラッパーとflex-direction: column組み合わせてflex-wrap: wrap固定の高さで使用するのがコツです。

ただし、追加する必要があります。これは、CSS列の仕様が作成されたシナリオのように見えるため、KatieKのソリューションの方が適している可能性があります。とりわけ、フレックスボックスの代わりにCSS列を使用する場合、ラッパーに固定の高さを指定する必要はありません。

于 2013-11-04T18:14:55.657 に答える