16

私はChromeでcss3のフレックスボックスで遊んでいます（これについてはクロスブラウザについて心配する必要はありません）。コンテンツを好きなようにレイアウトするように説得するのに苦労しています。これが私の目標のスケッチです：

ここに画像の説明を入力してください

これが私の試みのjsFiddleです：http：//jsfiddle.net/Yht4V/2/これ.groupは、それぞれが複数の列を作成するのではなく、高さを拡張することを除いて、うまく機能しているようです。

ここではフレックスボックスを広く使用しています。divがページの残りの高さを占めるように、bodyレイアウトは垂直に配置されます。#contentそれぞれ.groupが水平に配置されています。最後に、それぞれがラッピングで垂直に.item配置されます。.group

残念ながら、高さ.groupを拡張すると、それぞれが1つの列#contentになり、垂直スクロールバー（不要）が発生します。それぞれの高さを.group固定ピクセルサイズに設定すると、アイテムは複数の列に分割されますが、これはフレックスボックスの流動性を損ないます。高さが固定されている場合の外観は次のとおりです。http：//jsfiddle.net/Yht4V/3/

#contentでは、固定の高さを設定せずにすべてがフレックスボックスで管理されているため、divを垂直方向に拡張しないようにするにはどうすればよいですか？フレックスボックスが親の高さを拡張してスクロールバーを表示するのではなく、より多くの列をトリガーすることを期待していました。

4

2 に答える 2

10

FlexboxのChromeとOperaの実装で見たものから、flex-direction列のaは要素の高さを制限する必要があります。そうしないと、垂直方向に拡張し続けます。固定値である必要はなく、パーセンテージでもかまいません。

とはいえ、要素に必要なレイアウトは.group、CSS列モジュールを使用して実現することもできます。要素のフローはフレックスボックスの列の向きのフローと似ていますが、ドキュメントの長さに関係なく、要素に十分な幅がある限り、列が作成されます。

http://jsfiddle.net/Yht4V/8/（プレフィックスがないことを言い訳する必要があります）

html {
    height: 100%;
}

body {
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
}

h1 {
    padding: 1em;
}

#content {
    padding: 10px;
    background-color: #eee;
    display: flex;
    flex-grow: 1;
}

#content > .group {
    margin: 10px;
    padding: 10px;
    border: 1px solid #cfcfcf;
    background-color: #ddd;
    flex: 1 1 auto;
}

#content > .group:first-child {
    columns: 10em;
    flex-grow: 2;    
}

#content > .group .item {
    margin: 10px;
    padding: 10px;
    background-color: #aaa;
    break-inside: avoid;
}

#content > .group .item:first-child {
    margin-top: 0;
}

ネストされたフレックスボックスの束として残して、これは私がそれを得ることができるのとほぼ同じくらいでした：

http://jsfiddle.net/Yht4V/9/（ここでもプレフィックスなし）

html {
    height: 100%;
}

body {
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
}

h1 {
    padding: 1em;
}

#content {
    padding: 10px;
    background-color: #eee;
    display: flex;
    flex: 1 1 auto;
    height: 100%;
    width: 100%;
}

#content > .group {
    margin: 10px;
    padding: 10px;
    border: 1px solid #cfcfcf;
    background-color: #ddd;

    display: flex;
    flex-flow: column wrap;
    flex: 1 1 30%;
    max-height: 100%;
}

#content > .group .item {
    margin: 10px;
    padding: 10px;
    background-color: #aaa;
}
于 2013-02-23T18:33:13.577 に答える
0

css-- displayで以下を置き換えます。-webkit-flex; 次のように -display：-webkit-box;

これは私にとって非常にうまくいきました:-)

于 2013-08-11T13:45:01.470 に答える