0

これは、新しいフレキシブル ボックス レイアウト モデルに関する質問です。

Iのコンテナ内にdisplay: flex;2 つのアイテムがあるとします。コンテナーの幅が十分に広い場合、両方のアイテムが水平に配置されます。そうでない場合、フレックスボックスのレイアウト メカニズムにより、アイテムが垂直に積み重ねられます。私が望むのは、アイテムが隣り合っているときに両方のアイテムの間に内側のマージンを持たせることですが、アイテムを積み重ねる必要がある場合は、このマージンを消したいと思います。

これは FlexBox モデルで可能ですか?

例として、最近のバージョンの Chrome でテストされた次のドキュメントを使用できます。

<!DOCTYPE html>
<title>Flex Box</title>
<style>
    body {
        font-size: 100px;
    }
    .container {
        display: -webkit-flex;
        display: flex;  
        -webkit-flex-wrap: wrap;    
        flex-wrap: wrap;
    }
</style>
<div class="container">
    <p>
        One
    </p>
    <p>
        Two
    </p>
</div>

外側の div に十分な水平スペースがある場合、「One」と「Two」が隙間なく並べて表示されます。ブラウザ ウィンドウを縮小するとすぐに、両方が垂直に積み重なって表示されます。両方の段落が隣り合っている間、両方の段落を余白で区切っておきたいと思います。

http://jsfiddle.net/WHYS2/

4

2 に答える 2

1

これは部分的にのみ可能です。Media Queryを使用する必要があります。

次の例では、2 つのボックスが隣り合っていますが、十分なスペースがない場合 (たとえば、ブラウザのビューポートが 800px より小さい場合)、ボックスは互いに隣接しています。

http://jsfiddle.net/tjNhF/でライブのデモを見て、ブラウザ ウィンドウのサイズを変更してください。

HTML:

<div class="box">
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dapibus tellus non dui eleifend viverra. Proin quis nunc purus. Suspendisse at quam nisl, nec posuere mi. Donec nec nisi eros. Fusce vel orci quam. Cras urna arcu, hendrerit in consequat in, faucibus vitae nulla. Donec a urna risus. Proin posuere. </p>
    </div>
    <div>
        <p>Nulla magna felis, facilisis vel adipiscing et, bibendum ac tellus. Pellentesque in risus in leo scelerisque adipiscing quis ut augue. Etiam luctus nisi sit amet nulla ullamcorper quis commodo purus volutpat. Sed est nisl, facilisis non vestibulum sed, auctor et odio. Aenean eget neque urna, a hendrerit ipsum. Sed sollicitudin.</p>
    </div>
</div>

CSS:

@media all {
    body {
        background-color: #aaffaa;
    }

    .box {
        width: 100%;
        border: 1px solid #555;

        display: -webkit-box;
        -webkit-box-orient: horizontal;

        display: -moz-box;
        -moz-box-orient: horizontal;

        display: box;
        box-orient: horizontal;
    }

    .box > div {
        padding: 1em 5em;
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        box-flex: 1;
    }

    .box > div:nth-child(1){ background : #abc; }
    .box > div:nth-child(2){ background : #bca; }
}

@media (max-width: 800px) {
    body {
        background-color: #ffaaaa;
    }

    .box {
        box-orient: vertical;
        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
    }
    .box > div {
        padding-left: 0;
        padding-right: 0;
    }
}
于 2012-11-05T13:39:56.367 に答える
0

段落が同じ行にある場合、それらの間に固定幅の余白を置き、2 番目の段落の右側に余分なスペースを追加しますか? それとも、1 番目を左に固定し、2 番目を右に固定し、その間に可変幅のマージンを置きますか? 現在のように、段落の幅をコンテンツに基づいて設定しますか?

段落が 2 行に折り返された場合でも、その幅をコンテンツに基づいて設定しますか?それとも、各段落を拡張してその行の 100% を埋めるようにしますか?

于 2012-11-09T01:57:25.763 に答える