Drei-Säulen-HTML-flex box: wie die Mitte, um alle verbleibenden Speicherplatz?

Sagen wir, ich habe ein einfaches drei-Spalten-layout mit display: flex; (demo). In der linken und rechten Spalten, ich habe die Bilder eine bestimmte Breite ( 100px ). In der mittleren Spalte habe ich die Haupt-content-Bereich. Dieser Bereich verfügt über ein high-res Bild:

<div id="main-container">

    <div id="left-content">
        <div><img src="http://agevoluzione.com/wp-content/uploads/2014/07/Work-in-progress-1024x603.png"></div>
        <div><img src="http://agevoluzione.com/wp-content/uploads/2014/07/Work-in-progress-1024x603.png"></div>
        <div><img src="http://agevoluzione.com/wp-content/uploads/2014/07/Work-in-progress-1024x603.png"></div>
        <div><img src="http://agevoluzione.com/wp-content/uploads/2014/07/Work-in-progress-1024x603.png"></div>
    </div>

    <div id="center-content">
        <div><img src="https://farm6.staticflickr.com/5560/14080568109_9f33dc7964_o.jpg"></div>
    </div>

    <div id="right-content">
        <div><img src="http://agevoluzione.com/wp-content/uploads/2014/07/Work-in-progress-1024x603.png"></div>
        <div><img src="http://agevoluzione.com/wp-content/uploads/2014/07/Work-in-progress-1024x603.png"></div>
        <div><img src="http://agevoluzione.com/wp-content/uploads/2014/07/Work-in-progress-1024x603.png"></div>
        <div><img src="http://agevoluzione.com/wp-content/uploads/2014/07/Work-in-progress-1024x603.png"></div>
    </div>
    </div>

</div>

Brauche ich, um zu zwicken die CSS so, dass der center-Spalte-Breite ist höchstens 100% der verfügbaren Fläche zwischen den seitlichen Spalten (in anderen Worten, es müssen immer diesem weit: windowSize-spalte1-spalte2). Wenn das Fenster verkleinert wird, muss ich die Mittelsäule (und sein Bild) zu schrumpfen.

#main-container
    {
    display: flex;
    justify-content: space-between;
    align-items: center;
    }

#left-content,
#right-content
    {
    width: 102px;

    border-style: solid;
    border-width: 2px;
    border-color: magenta;
    }

#left-content img,
#right-content img
    {
    width: 100px;
    }

#center-content
    {
    }

#center-content img
    {
    max-width: 100%;
    height: auto;
    }

Was bin ich?

SOrry, aber es macht auch in Ihrem Turnschuh. Es tut genau, was Sie wollen.
Nicht wirklich: in der Mitte überlappen, auf der linken Spalte.
ich denke, dass Sie verwenden können, width: calc(100% - 200px);
Ich bin traurig, dass ich wirklich nicht sehen, Ihr problem. Ich nahm einen screenshot. awesomescreenshot.com/0a93atc528
Ich erhöhte ein wenig die Breite der Spalten zu machen, mehr klar.

InformationsquelleAutor Dr. Gianluigi Zane Zanettini | 2014-08-12

  1. 25

    Dem richtigen Weg, es zu tun ist mit flex. Set flex zu 1 1 auto für die mittlere Spalte, und die 0 0 auto für die seitlichen Spalten. Das macht es so dass die seitlichen Spalten sind immer die angegebene Breite (oder Breite der Inhalte, wenn nicht anders angegeben), und die mittlere Spalte nimmt den verbleibenden Platz (wachsende/schrumpfende entsprechend). Hier ist die CSS (demo):

    #main-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#center-content {
    flex:1 1 auto; /* Lets middle column shrink/grow to available width */
}
#left-content,
#right-content {
    flex:0 0 auto; /* Forces side columns to stay same width */
    width:100px; /* Sets the width of side columns */
}
img {
    max-width:100%; /* Shrinks images to fit container */
}
    Ich wechselte zu diesem als akzeptiert, nachdem Sie Ihren Kommentar auf meine Vorherige akzeptiert. Deins ist sauberer und wirklich funktioniert am besten! Danke!
    Herzlich willkommen! Auch, in Ihren Frage-und fiddle, haben Sie eine zusätzliche </div> (am Ende). Vermute, es war nur ein copy & paste-Problem, wenn Sie waren, die Frage zu stellen, wollte aber mal erwähnen, es in Fall war es nicht.
    Es habe! Ja, nur ein Tippfehler 🙂

    InformationsquelleAutor 0b10011

  2. 3
    #center-content {
    width: calc(100% - 204px);
}

    Ist hier das fiddle: http://jsfiddle.net/sachinvermarip/s1j40s42/1/

    Wow, vielen Dank! Ich wusste gar nicht, dass css-Unterstützung einfache Mathematik! Ich werde upvote dir!
    Nicht alle Browser unterstützen dies. Siehe caniuse.com/#feat=calc

    InformationsquelleAutor Sachin Verma

  3. 0

    Wenn der Inhalt des auto-Größe-Abschnitt in flexbox ist größer als der verfügbare Bereich sollte es passen, Browser (zumindest Chrome und Firefox) wird NICHT Bezug flex:1 1 auto;, und die Spalte/Zeile wird genügend Raum für den Inhalt, nicht den Ziel-container. Als Ergebnis, die gesamte Breite/Höhe der alle Spalten/Zeilen in flexbox werden mehr als 100%.

    Wenn flex:1 1 auto; ist eng mit einer expliziten Größe, zum Beispiel width: 10%;, dann Spalte wird in der korrekten Größe an den verfügbaren Raum, und 10% werden einfach ignoriert. Größe in px funktioniert genauso gut.

    Es ist etwas komisches passiert mit overflow: hidden; verwendet statt width: 10%;. Ergebnis in Firefox ist identisch, aber Chrome schneidet den Inhalt auf der entgegengesetzten Achse. Selbst wenn Sie overflow-y: hidden; Chrome pflücken der Inhalt auf der rechten Seite (Achse x).

    Hier ist ein Beispiel:

    #center-content {
  width: 100%;
  height: 10%;
  flex: 1 1 auto;
}

    InformationsquelleAutor zmechanic

  4. -1
    #center-content
    {
        width:100%;
    }
    Verma-Lösung ist sehr gut, aber deiner ist noch besser! Hier das fiddle: jsfiddle.net/sexyzane/gyhej0jy
    Dies gilt nicht hinsichtlich der Breite der seitlichen Säulen (man beachte das "work in progress" - Bilder abgeschnitten).

    InformationsquelleAutor Csegedi Szabolcs Botond

Schreibe einen Kommentar