Utilisation de flexboxes pour la page d'accueil

[roidelapluie]

No description provided.

[roidelapluie]

Doc:

https://philipwalton.github.io/solved-by-flexbox/
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
http://caniuse.com/#search=flex

[AlexandreDecan]

Quel est le problème adressé ? Le placement des billets sur la homepage, c'est cela ?
Peut-être devrait-on demander à Tchou (ou à un autre expert CSS vu qu'il n'est pas à l'aise avec flexbox) de checker le PR ? Je n'ai aucune expérience là-dedans... :-)

[roidelapluie]

C'est un experiment pour améliorer le look and feel des billets avec une technique css moderne :)

[roidelapluie]

@AlexandreDecan voila. Screenshots:

[roidelapluie]

tu penses quoi du rendu? l'objectif c'est d'avoir les deux news du bas de même hauteur et alignés avec le bas de la news de droite si elle est trop longue.

[AlexandreDecan]

J'aime bien, je n'ai pas encore regardé le code. Par contre, est-ce qu'il serait possible d'étendre verticalement équitablement les éléments de gauche quand les éléments de droite sont trop "gros" ?
L'idée serait de minimiser l'espace blanc "perdu" et non de le déplacer, mais je n'ai aucune idée de la puissance de flexbox à ce niveau ?

[roidelapluie]

ça va pas être beau ? il y aura du blanc dans les news?

[AlexandreDecan]

Bah dedans ou au dessus, ça fait du blanc tout de même, non ? :-)
Je vais lire quelques articles sur flexbox, et je reviens sur ce thread avec des suggestions (ou un merge PR directement ^^).

[roidelapluie]

quoi que on pourrait centrer dans les boxes? enlever les boxes?

[roidelapluie]

(ou ne rien faire et laisser tomber :) )

[AlexandreDecan]

Je viens de parcourir un peu la doc. Je me demande si on ne peut pas faire quelque chose pour rendre tout le layout des billets fluides. Exemple:

Un conteneur global, c1 en flex-direction: row. Dans ce conteneur, deux conteneurs fils cLet cR avec des flex-grow respectivement à 3 et 1 (à ajuster) et align-items: stretch (servira pour les éléments fils). Le conteneur de droite cR contient les "vieux billets", donc en flex-direction: column. Les éléments fils (les billets) sont en align-items: stretch pour occuper l'espace.

Le conteneur de gauche, cL est aussi en flex-direction: column, avec un align-items: stretch aussi. Ce conteneur a deux éléments fils : cMain et cSeconds, le premier contenant le billet principal, le second contenant les deux billets suivants. (peut-être prévoir un flex-grow des éléments fils de cL respectivement à 1 et 2).

cSeconds est un conteneur en align-items: stretch, en flex-direction: row ave les deux billets fils en align-items: stretch et un flew-grow: 1 pour occuper tout l'espace.

Si j'ai du temps, je ferai une maquette.

[roidelapluie]

Je propose l'abandon vu http://www.lexpage.net/board/message/7241/

[AlexandreDecan]

Je le garde encore un peu en stock car je souhaite faire quelques essais sur base de ta proposition, notamment pour découvrir et mieux comprendre Flexbox.

[roidelapluie]

je ferme car ce sera natif dans bootstrap 4

[AlexandreDecan]

Ok ;-)
C'est correctement supporté par les navigateurs, maintenant, les flexboxes ?

[roidelapluie]

Aucune idée :)

Voila la doc bs4 https://v4-alpha.getbootstrap.com/utilities/flexbox/

[AlexandreDecan]

Ils ont l'air de vouloir créer autant de classes qu'il y a de propriétés :-D