Flexbox — Flex-grow

Introduction

flex-grow dit à un enfant combien de parts de l'espace libre il doit absorber une fois que tous les flex-basis ont été respectés. Chaque valeur est relative aux autres — si un bloc a flex-grow: 2 et ses voisins 1, il recevra deux fois plus d'espace disponible qu'eux.

Exemple interactif
<div class="container">
130px
<div class="el1"></div>
flex-grow:
130px
<div class="el2"></div>
flex-grow:
130px
<div class="el3"></div>
flex-grow:
</div>
.container {
  display: flex;
}
.el1 {
  
}
.el2 {
  flex-grow: 0;
}
.el3 {
  flex-grow: 0;
}
flex-grow: 0; est la valeur par défaut.
En tout, il y a 0 part d'espace vide à répartir.
L'élément 1 prend 0 part de l'espace vide disponible.
L'élément 2 prend 0 part de l'espace vide disponible.
L'élément 3 prend 0 part de l'espace vide disponible.

Propriété flex

La propriété abrégée flex combine flex-grow, flex-shrink et flex-basis (flex: 1 0 200px). Quand on écrit flex: 1, on obtient en réalité flex: 1 1 0.

Exercice

Zone éditable
<style>
  .player {
    display: flex;
    /* 🦊 Ajouter de l'espacement entre les enfants, de l'alignement, etc */
  }
  .track {
    background: lightblue;
    height: 10px;
    /* 🦊 Faire en sorte que la piste prenne tout l'espace disponible */
  }
</style>

<div class="player">
  <button class="play">Play</button>
  <div class="track"></div>
  <div class="time">00:00</div>
</div>
RetourContinuer