28111 sujets

CSS et mise en forme, CSS3

[Résolu] Flexbox : des espaces en trop

Bonjour

Je m'essaye sur les flexbox, mais n'arrive pas à obtenir ce que je veux...
Ce que je souhaite :
upload/62536-orgaflexbo.jpg
(le tout dans un même conteneur, et sachant que le 4 va ensuite se faire transform : rotate() )

Pour ça, j'ai donné à mon conteneur un flex en ligne, qui se wrappe, avec une disposition horizontale régulièrement espacée et une disposition verticale serrée en haut. Puis j'ai passé les 3 premiers éléments en width 100%, et j'ai demandé une exception pour les 4, 5 et 6 avec align-self : flex-end. Ils se mettent bien en bas, mais j'ai un écart grossier entre les trois premiers blocs, et j'arrive pas à savoir d'y ça vient (pas de margin ou padding pourtant).

<!DOCTYPE html>
   <html>
      <head>
         <style> 
         .flex-container {
            display: flex;
            flex-direction : row ;
            flex-wrap : wrap ;
            justify-content : space-around ;
            align-items: flex-start;
            width: 400px;
            height: 300px;
            background-color: lightgrey;
         }

         .flex-item {
            background-color: cornflowerblue;
            width: 100px;
            height : 20px ;
         }

         .pastoi {width : 100%;}

         .toi {align-self : flex-end ;}

         </style>
      </head>
      <body>

         <div class="flex-container">
            <div class="flex-item pastoi">flex item 1</div>
            <div class="flex-item pastoi">flex item 2</div>
            <div class="flex-item pastoi">flex item 3</div> 
            <div class="flex-item toi">flex item 4</div>
            <div class="flex-item toi">flex item 5</div>
            <div class="flex-item toi">flex item 6</div> 
         </div>

      </body>
</html>

nb : testable direct ici

Ou bien est-ce qu'il y aurait une autre technique pour obtenir un positionnement de ce genre ?
Modifié par Motzee (31 Jul 2016 - 00:52)
Administrateur
Hello,

Sans fixer de hauteur sur le container, ça donne quoi ?
Sinon un align-content: flex-start; toujours sur le container?
Raphael a écrit :
Hello,

Sans fixer de hauteur sur le container, ça donne quoi ?
Sinon un align-content: flex-start; toujours sur le container?


Bonjour, merci pour ces indications : si je remplace align-items par align-content, les éléments se groupent bien tous en haut. Par contre, l'exception que j'avais mise pour les éléments 4, 5 et 6 via align-self pour qu'ils se collent en bas ne fonctionne plus (schéma du résultat, avec des flèches montrant la position souhaitée).
upload/62536-orgaflexbo.jpg

Si je retire la width, je n'ai plus du tout d'espace permettant d'écarter les 3 premiers éléments des 3 derniers.

Du coup, je m'aperçois avec ta réponse que je suis pas bien au point sur la différence entre align-items et align-content Smiley ohwell (les deux me semblent déterminer la répartition des cellules sur l'axe secondaire, vertical dans mon cas, je dois passer à côté d'une subtilité ?).
Modifié par Motzee (31 Jul 2016 - 01:05)
Bonjour !

"Align-content" est la propriété qui répartit les rangées en hauteur dans un conteneur en "flex-direction : row".
"Align-items" est la propriété qui définit l'alignement des éléments des rangées.

C'est visible dans les figures des paragraphes 8.3 et 8.4 de ce document :
https://www.w3.org/TR/css-flexbox-1/

Par défaut, la répartition en hauteur est 'align-content : stretch', flexbox va utiliser la totalité de la hauteur et va la répartir équitablement sur les 4 rangées de votre exemple, d'où l'"écart grossier entre les trois premiers blocs"... Si vous mettez align-content : flex-start, la hauteur totale n'est plus prise en compte, et les rangées se trouvent coincées en haut...

Je ne vois pas comment régler votre problème (sans modifier le html), car align-content est une propriété du conteneur, et on ne dirait pas qu'il a moyen de cibler une rangée pour qu'elle se comporte différemment des autres...

Edit : La solution est peut-être à chercher du côté de flex-direction : column...

Smiley smile
Administrateur
En effet, la différence entre align-items et align-content est un peu subtile, mais les deux peuvent être complémentaires.

Grosso-modo :
- align-items gère l'alignement des éléments sur l'axe secondaire
- align-content gère l'alignement des lignes entières sur l'axe secondaire, uniquement quand il y a plusieurs lignes

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Dans ton cas, tu veux réaliser deux comportements en un seul, c'est à dire gérer finement l'axe vertical et horizontal à la fois, or Flexbox n'est pas forcément prévu pour cela.

Il me semble que la meilleure solution, en attendant Grid Layout fait pour cela, sera de regrouper les derniers éléments dans un conteneur supplémentaire et passer en direction "column" : http://codepen.io/raphaelgoetter/pen/QEBxZK?editors=1100

Edit : bien joué Zelena Smiley cligne
Modifié par Raphael (31 Jul 2016 - 09:11)
Génial, merci Smiley lol ! Je commençais à désespérer, sur les tutos les flexbox sont tellement efficaces, et là premier truc que je fais sans copier un modèle je m'en dépêtrais pas, et je voulais pas repasser aux vieilles méthodes de positionnement (j'ai pas encore osé regarder les grids). Je garde les liens sous le coude, je compte bien tester les flexbox dans tous les sens donc ils risquent de vite me servir.

Merci encore à vous deux Smiley smile
Administrateur
Motzee a écrit :
Génial, merci Smiley lol ! Je commençais à désespérer, sur les tutos les flexbox sont tellement efficaces, et là premier truc que je fais sans copier un modèle je m'en dépêtrais pas

Ben si j'osais, je te conseillerais bien un bon livre Flexbox Smiley lol
Sujet clos
Aller à