Trois colonnes HTML flex box: comment définir le moyen pour obtenir tout le reste de l'espace?

Disons que j'ai une simple disposition en trois colonnes mis en place en utilisant display: flex; (démo). Dans les colonnes droite et gauche, j'ai des images avec une largeur spécifiée (100px chaque). Dans la colonne du centre, j'ai de la zone de contenu principal. Cette région est d'une haute résolution d'image:

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

J'ai besoin de modifier le CSS de sorte que le centre de la largeur de colonne est, au plus, 100% de l'espace disponible entre les colonnes latérales (en d'autres termes, il doit toujours être présente à l'échelle: windowSize-colonne1-colonne2). Si la fenêtre se rétrécit, j'ai besoin de la colonne du centre (et son image) à se rétrécir avec elle.

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

Ce qui me manque?

Désolé, mais il rend bien dans votre Violon. C'est exactement ce que vous voulez.
Pas vraiment: le centre est qui se chevauchent sur la gauche de la colonne.
je pense que vous pouvez utiliser largeur: calc(100% - 200px);
Je suis désolé, j'ai vraiment ne voyez pas votre problème. J'ai pris une capture d'écran. awesomescreenshot.com/0a93atc528
J'ai augmenté un peu la largeur des colonnes pour le rendre plus clair.
Elle est confrontée au final: jsfiddle.net/sexyzane/gyhej0jy
Je ne suis pas sûr de comprendre. Vous vouliez que les images dans vos colonnes droite et gauche pour être pleinement montré? Rien à voir avec l'image dans la colonne du milieu avec le bébé? 🙁

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

36

La bonne façon de le faire est avec flex. Ensemble flex à 1 1 auto pour la colonne du milieu, et 0 0 auto pour les colonnes latérales. Ce qui le rend si les colonnes latérales sont toujours à la largeur spécifiée (ou la largeur du contenu, si non spécifié), et la colonne du milieu occupe le reste de l'espace (croissant/réduire en conséquence). Voici le CSS (démo):
```
#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 */
}
```
- J'ai opté pour ce acceptée après votre commentaire sur mon précédent reconnus. La vôtre est plus propre et fonctionne vraiment mieux! Merci!
- Bienvenue! Aussi, dans votre question, et le violon, vous avez un supplément de </div> (à la fin). Deviner qu'il était juste un copier & coller problème lorsque vous ont posé la question, mais je voulais le mentionner dans le cas où il ne l'était pas.
- De se! Oui, juste une faute de frappe 🙂
- De toute façon je peux éviter la fixation du côté de la largeur de la zone? Qui sera meilleur que la largeur de fixation je pense.
- yup! La première partie de flex est un moyen rapide de set flex-grow et la deuxième partie est un moyen rapide de set flex-shrink. Donc, si vous voulez les barres latérales et le contenu principal de l'échelle à la même vitesse en fonction de leur contenu (fonctionne bien pour les photos uniquement), puis utilisez #left-content, #right-content { flex: 1 1 auto }. Mais si vous avez affaire avec le texte dans les encadrés, et non pas à l'aide d'une largeur relative de la taille (par exemple, vw), alors vous aurez également souhaitez définir un min-width sur les barres latérales.
InformationsquelleAutor 0b10011
4
```
#center-content {
    width: calc(100% - 204px);
}
```
Ici est le violon: http://jsfiddle.net/sachinvermarip/s1j40s42/1/
- Wow, merci! Je n'ai pas maintenant que le support de css de base en mathématiques! Je vais upvote la vôtre!
- Pas tous les navigateurs prennent en charge cette. Voir caniuse.com/#feat=calc
InformationsquelleAutor Sachin
0

Si le contenu de l'auto de taille moyenne section dans flexbox est plus grande que la surface disponible, elle vise à adapter, les navigateurs (au moins Chrome et Firefox) de ne PAS respecter flex:1 1 auto;, et la colonne/ligne va prendre assez d'espace pour le contenu, pas le conteneur cible. En conséquence, le total de la hauteur/largeur de toutes les colonnes/lignes dans flexbox sera de plus de 100%.

Si flex:1 1 auto; est couplé avec une certaine taille explicite, par exemple width: 10%;, puis colonne sera correctement de la taille de l'espace disponible, et de 10% sera tout simplement ignoré. Taille en px fonctionne aussi bien.

Il y a quelque chose de drôle qui va avec overflow: hidden; être utilisé à la place de width: 10%;. Résultat de Firefox est identique, mais Chrome supprime le contenu de l'axe opposé. Même si vous définissez overflow-y: hidden; Chrome, présentera une sélection du contenu sur la droite (axe x).

Voici un exemple:
```
#center-content {
  width: 100%;
  height: 10%;
  flex: 1 1 auto;
}
```
InformationsquelleAutor zmechanic

Il y a une façon plus simple d'obtenir ce que vous demandez, et il ne nécessite qu'une seule ligne de CSS (flex-grow: 1).

CSS:

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

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

#center-content {
  flex-grow: 1;
  background-color: red;
}

HTML:

<div class="main-container">    
  <div id="left-content">
    left
  </div>

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

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

InformationsquelleAutor Andy Hoffman

C'est le bootstrap 4 solution (démo) :

<div id="main-container" class="d-flex justify-content-between">

<div id="left-content" class="col-auto">
<p> left</p>
</div>

<div id="center-content" class="flex-fill bg-success">
<p> middle stretched</p>
</div>

<div id="right-content" class="col-auto">
<p>right</p>
</div>

</div>

InformationsquelleAutor juFo

-1
```
#center-content
    {
        width:100%;
    }
```
- Verma solution est très bonne, mais le vôtre est encore mieux! Ici le violon: jsfiddle.net/sexyzane/gyhej0jy
- Ce n'est pas le respect de la largeur des colonnes latérales (notez le "work in progress" de l'image est coupée).
InformationsquelleAutor Csegedi Szabolcs Botond

Vous devez vous connecter pour publier un commentaire.