74

リストについては、次のレイアウトを念頭に置いています。各リスト項目は2つの列で表されます。2番目の列は使用可能なすべてのスペースを占める必要がありますが、最初の列があまりにも多くのスペースを占める場合は、最小サイズで右側に固定する必要があります。最初の列には省略記号が表示されます。

その最後のケースで問題が発生しています。最初の列が多すぎるテキストで構成されている場合、省略記号を表示する代わりに、フレックスボックスから伸びて水平スクロールバーが表示され、2番目の列は右側に固定されません。

このようにレンダリングしてもらいたい（モックアップ）：

期待されるレンダリング

どうすればそれを達成できますか？

これは サンプルフィドルです。

.container {
    display: -webkit-flex;
}

div {
    white-space: nowrap;
    text-overflow: ellipsis;
}

.container > div:last-child {
    -webkit-flex: 1;
    background: red;
}
<!-- a small first column; the second column is taking up space as expected -->
<div class="container">
    <div>foo barfoo bar</div>
    <div>foo bar</div>
</div>

<!-- a large first column; the first column is overflowing out of the flexbox container -->
<div class="container">
    <div>foo barfoo barfoo barfoo barfoo barfoo barfoo bar
    foo barfoo barfoo barfoo barfoo barfoo barfoo bar
    foo barfoo barfoo barfoo barfoo barfoo barfoo bar</div>
    <div>foo bar</div>
</div>

4

7 に答える 7

128

アップデート

動作するコードの追加：

.container {
    display: -webkit-flex; 
}

.container>div:first-child{
    white-space:nowrap;
   -webkit-order:1;
   -webkit-flex: 0 1 auto; /*important*/
    text-overflow: ellipsis;
    overflow:hidden;
    min-width:0; /* new algorithm overrides the width calculation */
}

.container > div:last-child {
    -webkit-flex: 1;
    -webkit-order:2;
    background: red;
    -webkit-flex:1 0 auto; /*important*/
}
.container > div:first-child:hover{
    white-space:normal;
}
<div class="container">
    <div>foo barfoo bar</div>
    <div>foo bar</div>
</div>

<div class="container">
        <div>foo barfoo barfoo barfoo barfoo barfoo barfoo bar
        foo barfoo barfoo barfoo barfoo barfoo barfoo bar
        foo barfoo barfoo barfoo barfoo barfoo barfoo bar</div>
    <div>foo bar</div>
</div>
<div class="container">
    <div>foo barfoo bar</div>
    <div>foo bar</div>
</div>

<div class="container">
        <div>foo barfoo barfoo barfoo barfoo barfoo barfoo bar
        foo barfoo barfoo barfoo barfoo barfoo barfoo bar
        foo barfoo barfoo barfoo barfoo barfoo barfoo bar</div>
    <div>foo bar</div>
</div><div class="container">
    <div>foo barfoo bar</div>
    <div>foo bar</div>
</div>

元の回答/説明。

W3C仕様では、「デフォルトでは、フレックスアイテムは最小コンテンツサイズ（最長の単語または固定サイズの要素の長さ）を下回って縮小しません。これを変更するには、「min-width」または「min-height」を設定します。プロパティ。」

この考え方に従えば、バグはカナリアから削除されたと思いますが、その逆ではありません。

入れたらすぐにチェックしてくださいmin-width、0カナリアで動作します。

したがって、バグは古い実装にあり、カナリアはそのバグを削除します。

この例はカナリアで機能しています。http://jsfiddle.net/iamanubhavsaini/zWtBu/

GoogleChromeバージョン23.0.1245.0カナリアを使用しました。

于 2012-08-26T15:29:06.183 に答える
10

flex次のように、プロパティの3番目の値をautoに設定することで、子の優先サイズを設定できます。

flex: 1 0 auto;

flex-basis これは、プロパティを設定するための省略形です。

（例）

ただし、コメントに記載されているように、これはChrome Canaryでは機​​能しないようですが、理由はわかりません。

于 2012-08-20T23:06:29.777 に答える
2

更新：これは答えではありません。それは別の問題を解決し、それは本当の答えを見つけるためのステップでした。だから私は歴史的な理由でそれを保持しています。投票しないでください。

これがあなたの答えだと思います：http：//jsfiddle.net/iamanubhavsaini/zWtBu/2/

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

W3Cを参照

最初の要素

-webkit-flex: 0 1 auto; /* important to note */

そして2番目の要素のために

-webkit-flex:1 0 auto; /* important to note */

トリックを行うプロパティと値です。

詳細については、http：//www.w3.org/TR/2012/WD-css3-flexbox-20120612/#flexをご覧ください。

これが順序を逆にする方法です：http：//jsfiddle.net/iamanubhavsaini/zWtBu/3/

これは、red-backgrounded-thingyの最小幅が事前定義されています：http：//jsfiddle.net/iamanubhavsaini/zWtBu/1/

于 2012-08-26T14:11:54.793 に答える
0

更新：これは答えではありません。それは別の問題を解決し、それは本当の答えを見つけるためのステップでした。だから私は歴史的な理由でそれを保持しています。投票しないでください。

編集2：この答えは問題を解決しません。質問の対象と回答には微妙な違いがあります。

まず第一に、でtext-overflow:ellipsis動作しoverflow:hiddenます。実際には、以外のもので動作しoverflow:visibleます。参照

次に、次の手順を繰り返します。

http://jsfiddle.net/iamanubhavsaini/QCLjt/8/

ここに、プロパティを入れoverflowましmax-widthた。テキストが表示されないようにし、テキストデータが多すぎる場合に実際に一定のサイズのボックスを作成するmax-width:60%;ためoverflow:hidden、意図したとおりに表示されます。hidden60%

次に、フレックスボックスモデルに本当に興味がある場合は、を介して物事がどのように展開されるかを次に示します-webkit-order。

http://jsfiddle.net/iamanubhavsaini/QCLjt/9/

- コード - 

<div class="container">
    <div>foo barfoo bar</div>
    <div>foo bar</div>
</div>

<div class="container">
        <div>foo barfoo barfoo barfoo barfoo barfoo barfoo bar
        foo barfoo barfoo barfoo barfoo barfoo barfoo bar
        foo barfoo barfoo barfoo barfoo barfoo barfoo bar</div>
    <div>foo bar</div>
</div>

懸念されるCSS

.container {
    display: -webkit-flex;
}

div {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow:hidden;
}
.container>div:first-child{
   -webkit-order:1;
        -webkit-flex: 1;
}
.container > div:last-child {
    -webkit-flex: 1;
    -webkit-order:2;
    background: red;
}

-幅はありませんが、それでも機能します。そして、これは私が見るものです。

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

-コメント後

-webkit-order：N; これは、2年以上後に使用するものでfloat:---;あり、さらに多くのハックがあります（W3Cがこのコースにとどまり、すべてのブラウザーベンダーが従う場合）

ここでは、順序は左のdivが1、右のdivが2です。したがって、それらは左右です。

http://jsfiddle.net/iamanubhavsaini/QCLjt/10/

ここでも同じですが、右左を探している場合にのみ、次のように順序を変更してください。div>first-child { -webkit-order:2; } div>last-child{-webkit-order:1;}

注：この-webkit-flex方法では、明らかにこのコードが他のエンジンで役に立たなくなります。コードの再利用については、複数のブラウザエンジンでfloatingを使用する必要があります。

以下はJSの例です。それは質問に答えません-コメントの後

これはあなたの質問に答えると思いますが、他にもいくつかの方法とさまざまな解決策がありますが、この質問の解決策は正確ではありません。 http://jsfiddle.net/iamanubhavsaini/vtaY8/1/ http://jsfiddle.net/iamanubhavsaini/9z3Qr/3/ http://jsfiddle.net/iamanubhavsaini/33v8g/4/ http://jsfiddle.net/ iamanubhavsaini / 33v8g / 1 /

于 2012-08-26T05:12:48.720 に答える
0

mozillaの場合は、「min-width：1px;」を追加する必要があります。

于 2012-11-02T17:42:45.200 に答える
0

この例は本当に役に立ちました：http：//jsfiddle.net/laukstein/LLNsV/

container {
    display: -webkit-flex;
    -webkit-flex-direction: row;
    padding: 0;
    white-space: nowrap;
}

.container>div {
    overflow: hidden;
    display: inline-block;
    -webkit-flex: 1;
    min-width: 0;
    text-overflow: ellipsis;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
}
于 2015-11-23T05:04:53.377 に答える
-4

コンテナの位置を相対位置にし、子の位置を絶対位置にする必要があります。

于 2014-05-23T09:59:02.653 に答える