web-dev-qa-db-fra.com

Boîte de dialogue HTML à trois colonnes: comment définir celle du milieu pour obtenir tout l’espace restant?

Disons que j'ai une mise en page simple à trois colonnes configurée avec display: flex; ( demo ). Dans les colonnes de gauche et de droite, j'ai des images d'une largeur spécifiée (100px chaque). Dans la colonne centrale, j'ai la zone de contenu principal. Cette zone a une image haute résolution:

<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>

Je dois ajuster le CSS afin que la largeur de la colonne centrale soit au maximum égale à 100% de l'espace disponible entre les colonnes latérales (en d'autres termes, il doit toujours s'agir de la largeur suivante: windowSize-column1-column2). Si la fenêtre se réduit, il me faut la colonne centrale (et son image) pour la réduire.

#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;
    }

Qu'est-ce que je rate?

htmlcssflexbox
16
Dr. Gianluigi Zane Zanettini

La bonne façon de le faire est avec flex . Définissez flex sur 1 1 auto pour la colonne du milieu et 0 0 auto pour les colonnes latérales. Cela fait en sorte que les colonnes latérales ont toujours la largeur spécifiée (ou la largeur du contenu, si non spécifié), et que la colonne du milieu occupe l'espace restant (augmentant/réduisant en conséquence). Voici le 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 */
}
27
0b10011
#center-content {
    width: calc(100% - 204px);
}

Voici le violon: http://jsfiddle.net/sachinvermarip/s1j40s42/1/

3
Sachin Verma

Si le contenu de la section à taille automatique dans flexbox est plus grand que la surface disponible dans laquelle il était conçu, les navigateurs (au moins Chrome et Firefox) NE respecteront PAS flex:1 1 auto; et la colonne/la ligne occupera suffisamment d'espace pour son contenu, pas le conteneur cible. . En conséquence, la largeur/hauteur totale de toutes les colonnes/lignes dans flexbox sera supérieure à 100%.

Si flex:1 1 auto; est associé à une taille explicite, par exemple width: 10%;, la colonne sera correctement dimensionnée pour l'espace disponible et 10% seront simplement ignorés. La taille en px fonctionne également bien.

Il y a quelque chose de drôle avec overflow: hidden; utilisé au lieu de width: 10%;. Le résultat dans Firefox est identique, mais Chrome supprime le contenu sur l'axe opposé. Même si vous définissez overflow-y: hidden;, Chrome supprimera le contenu du côté droit (axe x).

Voici un exemple:

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

Il existe un moyen plus simple de réaliser ce que vous demandez, et il ne nécessite qu'une seule ligne de code CSS (flex-grow: 1).

.main-container {
  display: flex;
  min-height: 100vh;
}

.main-container > div {
  background-color: gray;
}

#center-content {
  flex-grow: 1;
  background-color: red;
}
<div class="main-container">    
  <div id="left-content">
    left
  </div>

  <div id="center-content">
  </div>

  <div id="right-content">
    right
  </div>
</div>
0
Andy Hoffman