flexbox hauteur ajuster au contenu

- Je utiliser un "design" flexbox.
J'ai un drôle de problème : j'ai un conteneur qui prend tout l'espace restant et je veux dans ce conteneur de l'enfant, qui est également flexbox, à leur hauteur, pour adapter leur contenu.

Voici la question:

CSS:

body, html {
  width:100%;
  height:100%;
  display:flex;
}

.container {
  display:flex;
  flex:1;
  flex-wrap:wrap;
}

.icon {
  width:10vh;
  margin:10px;
  display:flex;
  flex-direction:column;
}
.img {
  width:10vh;
  height:10vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background-color:red;
}

.text {
  text-align:center;
  
}

HTML:

<div class="container">
<div class="icon">
<div class="img">
</div>
<div class="text">
action 1
</div>
</div>
<div class="icon">
<div class="img">
</div>
<div class="text">
Action 2
</div>
</div>

<div class="icon">
<div class="img">
</div>
<div class="text">
Action 3
</div>
</div>

<div class="icon">
<div class="img">
</div>
<div class="text">
Action 4
</div>
</div>

<div class="icon">
<div class="img">
</div>
<div class="text">
Action 5
</div>
</div>

</div>

Comme vous pouvez le voir, l'icône prend toute la hauteur du conteneur : en fait, je ne veux pas spécifier une hauteur parce que je ne connais pas la longueur du texte et que vous voulez vraiment que, si le contenu est énorme, l'icône prend la hauteur de son contenu ( ne veux pas couper le texte). En outre, si la page est redimensionnée, je veux vraiment l'icône pour être alignées (comme sur un smartphone).

Aussi, je ne comprends pas pourquoi l'icône prend la hauteur de sa mère et non de son contenu, car je n'ai pas préciser "flex:1" sur elle. Je suppose que le comportement par défaut c'est pour s'adapter à la taille du contenu, mais cela ne semble pas fonctionner.

Merci pour votre aide.

l'image de la question

InformationsquelleAutor Adavo | 2016-01-16
  1. 3

    .icon's sont flex-column qui rend .imgs'étirer par défaut, sauf si .icon's ont align-items. La raison pour laquelle je n'ai pas demandé align-items à .icons'est parce que d'autres imbriquée flex-containers/flex-items a commencé à s'effondrer. Au lieu de régler à travers la hiérarchie, je suis monté et ajusté .container à la place.

    Pertinentes CSS:

    .container {
  display: flex;
  flex: 1;         /* If you remove this .container will shrink to wrap around .icon's */
  flex-wrap: wrap;
  justify-content: center;  /* This centers .icon's along a horizontal axis. */
  align-items: baseline;    /* This aligns .icon's along a common baseline vertically. */
  outline: 3px dashed blue; /* To show the size of .container */
}
.icon {
  width: 10vh;
  margin: 10px;
  display: flex;
  flex-direction: column;
  outline: 1px dashed red; /* To show the size of .icon */
}

    CSS:

    body,
html {
  width: 100%;
  height: 100%;
  display: flex;
}
.container {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  align-content: flex-start;
  outline: 3px dashed blue;
}
.icon {
  width: 10vh;
  margin: 10px;
  display: flex;
  flex-direction: column;
  outline: 1px dashed red;
}
.img {
  width: 10vh;
  height: 10vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: red;
}
.text {
  text-align: center;
}

    HTML:

    <div class="container">
  <div class="icon">
    <div class="img">
    </div>
    <div class="text">
      Action 1
    </div>
  </div>
  <div class="icon">
    <div class="img">
    </div>
    <div class="text">
      Action 2
    </div>
  </div>

  <div class="icon">
    <div class="img">
    </div>
    <div class="text">
      Action 3
    </div>
  </div>

  <div class="icon">
    <div class="img">
    </div>
    <div class="text">
      Action 4
    </div>
  </div>

  <div class="icon">
    <div class="img">
    </div>
    <div class="text">
      Action 5
    </div>
  </div>

</div>

    • Merci pour votre réponse. Malheureusement, même si l'icône a la bonne taille, lorsque vous redimensionnez la page l'icône sera distribué sur un comportement imprévu. En effet, l'action 5 par exemple sera positionné sur le milieu de la page au lieu d'être juste après l'Action 1
    • Il est facile de remédier. En mode veille.
    • Voici une image pour comprendre le comportement attendu : i64.tinypic.com/33upsbd.png
    • C'est vide.....Ok, de toute façon redimensionnée 5 écharpe sous 1 maintenant, merci de vérifier.
    • J'ai ajouté l'image sur mon premier post. Voici un lien : i.stack.imgur.com/Nv2ED.png
    • Je l'ai eu à se comporter comme la première image, quel comportement avez-vous envie? Le premier ou le second?
    • la seconde. Merci
    • Ok, prendre un coup d'oeil
    • Merci beaucoup. En effet, le alignez-les éléments et alignez-le contenu de l'aide. 🙂
    • Votre e la plupart de bienvenue, monsieur. Flexbox est float sur les stéroïdes, il suffit d'un petit changement dans le code, et vous obtenez des résultats spectaculaires.

    InformationsquelleAutor zer00ne