Wie man flexbox-Ausrichtung-Elemente flex-end-Arbeit in WebKit/Blink?

Ich versuche, ein nest flexbox in einem anderen flexbox. Die box ist vertikal:

+------+
|      |
+------+
|      |
|      |
|      |
+------+

Wo der Obere Bereich passt der Inhalt flex 0 1 auto und die untere Hälfte füllt den restlichen Raum flex 1 1 auto.

In der unteren Hälfte habe ich ein anderes flex-Feld, gehen, horizontal. Ich will die 2 inneren Boxen Raum-zwischen über-und flex-end für align-items-also im Grunde die 2 Innenteile sind fixiert auf der linken und rechten unteren Ecken wie diese:

+------+
|      |
+-+  +-|
|L|  |R|
+------+

Einstellung scheint zu funktionieren, im Firefox, aber bei Chrome(Blink) und Safari bekomme ich diese:

+------+
|      |
|      |
|      |
+-+--+-|
|L|  |R|
+-+  +-+

Hier ist der HTML -

<div id="outer">
    <div id="top">
        top
    </div>
    <div id="bottom">
        <div id="bottomcontents">
            <div id="botleft">
                bottom left
            </div>
            <div id="botright">
                bottom right
            </div>
        </div>
    </div>
</div>

Und es gibt die CSS -

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;   
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    border: 0px;
}

#outer {
    height: 100%;
    border: 1px solid red;
    display: flex;
    display: -webkit-flex;
    flex-flow: column;
    -webkit-flex-flow: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    -webkit-justify-content: center;
    -webkit-align-content: center;
    -webkit-align-items: center;
    min-height: auto;    
}
#top {
    width: 100%;
    flex: 0 1 auto;
    -webkit-flex: 0 1 auto;
    border: 1px solid blue;
}
#bottom {
    width: 100%;
    height: 100%;
    flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    border: 1px solid green;
}
#bottomcontents {
    height: 100%;
    width: 100%;
    border: 1px solid pink;
    display: flex;
    display: -webkit-flex;
    flex-flow: row;
    -webkit-flex-flow: row;
    justify-content: space-between;
    align-content: center;
    align-items: flex-end;
    -webkit-justify-content: space-between;
    -webkit-align-content: center;
    -webkit-align-items: flex-end;
    min-height: auto;        
}

#botleft, #botright {
    flex: 0 1 auto;
    -webkit-flex: 0 1 auto;
}
#botleft {
    border: 1px solid purple;
}
#botright {
    border: 1px solid cyan;
}

Und hier ist ein Turnschuh

Funktioniert es wie erwartet in Firefox. Habe ich etwas falsch gemacht? Ist das ein bug in Chrome und Safari? Gibt es eine Abhilfe?

InformationsquelleAutor gman | 2014-04-11

3

Etwar, was Sie sehen, ist, dass die "height: 100%;" #bottomcontents zwingt den container "außerhalb" des umgebenden Containers. Die 100% Höhe endet immer in seiner Höhe von übergeordneten, die hat auch 100% Höhe haben; was bedeutet, dass die Höhe angegeben wird, für #bottomcontents wird auf die gleiche Höhe wie #äußere. Sie können sehen, ein wenig mehr klar, dass es über das hinausgeht, was es sollte, wenn man "overflow: hidden;" #unten. Eine eingehendere Diskussion des Problems kann hier gefunden werden: Sie laufen in ist, die hier behandelt werden: Höhe 100% auf flexbox-Spalte Kind

Es sei denn, ich bin fehlt eine gewisse Anforderung Sie benötigen, können Sie auch entfernen Sie die #bottomcontents container und machen aufgrund Sie nur mit #bottom. Beispiel-code (jsfiddle-Beispiel unten):

HTML:
```
<div id="outer">
    <div id="top">
        top
    </div>
    <div id="bottom">
        <div id="bottomcontents">
            <div id="botleft">
                bottom left
            </div>
            <div id="botright">
                bottom right
            </div>
        </div>
    </div>
</div>
```
CSS:
```
* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;   
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    border: 0px;
}

#outer {
    border: 5px solid red;
    display: flex;
    display: -webkit-flex;
    height: 100%;
    width: 100%;
    flex-direction: column;
    -webkit-flex-direction: column;
}

#top {
    width: 100%;
    border: 5px solid blue;
    flex: 0 1 auto;
    -webkit-flex: 0 1 auto;
}

#bottom {
    width: 100%;
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    -webkit-flex-direction: row;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    height: 100%;
    border: 5px solid green;
    align-items: flex-end;
    -webkit-align-items: flex-end;
}

#left {
    border: 5px solid purple;
    padding: .5em;
    flex: 0 1 auto;
    -webkit-flex: 0 1 auto;
}

#right {
    border: 5px solid cyan;
    padding: .5em;
    flex: 0 1 auto;
    -webkit-flex: 0 1 auto;
}
```
Meine Fiedel: http://jsfiddle.net/blake770/2br5x/

Hrm. Das scheint wirklich falsch (ich sage nicht, dass du falsch liegst, ich sage, ich verstehe nicht rational). In meinem Beispiel #bottom füllt, was ist das überbleibsel #outer einmal #top nimmt, was Platz braucht. Wenn ich mir etwas im inneren #bottom und ich will es zu füllen den Raum in #bottom dann würde ich sagen height: 100% zu sagen, es "100% die Größe deiner Eltern", die #bottom. Dein Beispiel funktioniert, auf Kosten von getting rid of #bottomcontents aber was mache ich, wenn ich #bottomconents? Ich Las die Antwort, die Sie verlinkt, ich weiß nur nicht, wie flex ist besonders nützlich, da specced.
Es gibt ein paar Ideen, die Sie mit spielen können, hier ist ein Turnschuh, eine als Beispiel: jsfiddle.net/blake770/2br5x/1. Ich fügte hinzu, ein "#content" zwischen div #oben und #unten, und legen Sie die Höhe von der unteren auf 0. Dies kann Ihnen erlauben, ein wenig mehr Trennung zwischen header/content/footer als Dinge werfen in #bottomcontents. Einstellung der Höhe von #unten auf 0 zeigt immer noch die rechten und linken Spalten, sondern es ermöglicht auch die Sachen, die in Inhalt noch zu "erreichen" der Unterseite. Sie können auch fügen Sie ein div zwischen #Links und #rechts und Inhalte gibt, aber das bedeutet, Sie haben eine Marge auf jeder Seite.

InformationsquelleAutor Carl Blakemore

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.