1

boxWeb には、CSS3 に関する情報が存在しflexboxますflex。私が理解していることから、今のところflex、現在のドラフトメソッドです。したがって、使用するWebkitではdisplay: -webkit-flex、-webkit-flex: 1 auto...

box-pack: startしかし、私の質問は次のとおりです。 onのようなものをどのように使用できますflexか?

この例を見てください(Webkit のみ)。上に詰める必要がありますが、広がっています。これは、このハックな例に似ています(ただし、私の場合は適切ではなく、保守が困難です)。どうすれば修正できますか？

修正が必要

HTML

<div class="body">
    <h1>Test</h1>
    <div class="box" style="width: 80%"></div>
    <div class="box" style="width: 20%"></div>
    <div class="box" style="width: 20%"></div>
    <div class="box" style="width: 20%"></div>
    <!-- (NEED TO FIX) EMPTY SPACE -->
</div>

CSS

h1 {
    -webkit-flex: 1 100%;
}

.body {
    display: -webkit-flex;
    -webkit-flex-direction: row;
    -webkit-flex-wrap: wrap;
    height: 400px;
}

したがって、 1 行目、2 行目、3行目h1のすべてのスペースを使用する必要があることに注意してください。2行目、4 行目、5行目は 3 行目に移動します。.box.box.body

ハックな解決策:-(

HTML

<div class="body">
    <h1 style="height: 40px;">Test</h1>
    <div class="box" style="width: 80%; height: 20px;"></div>
    <div class="box" style="width: 20%; height: 20px;"></div>
    <div class="box" style="width: 20%; height: 20px;"></div>
    <div class="box" style="width: 20%; height: 20px;"></div>
    <div class="hackish"></div>
    <!-- NOTE THIS .hackish :-( -->
</div>

CSS

.hackish {
    width: 100%;
    height: 100%;
}

それで、いくつかの解決策はありますか？

4

1 に答える 1

2

ここにすべてを書き込んで例を作成した後、5秒後に解決策を見つけました。うーん...

-webkit-align-content: flex-starton .body( W3 Flexbox - Align Content )を使用するだけです。これが解決策です：

.body {
    display: -webkit-flex;
    -webkit-flex-direction: row;
    -webkit-flex-wrap: wrap;
    height: 400px;

    -webkit-align-content: flex-start;
}

この作業を参照してください。

于 2013-03-25T19:33:53.233 に答える