J'ai pas pigé le systeme de placement avec Flex

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • J'ai pas pigé le systeme de placement avec Flex

    Salut

    Je suis en train d'apprendre à utiliser Grid et Flex. J'ai fait une mise en page avec Grid pour personnaliser l'affichage en blog et maintenant je voudrais faire la même chose mais avec Flex. J'ai réussis avec Grid mais là je butte avec Flex. Voila ce que j'ai fait avec grid et là avec Flex.

    J'ai assez vite pigé avec Grid vue que c'est pour une mise en page en tableau. Mais avec Flex, malgré les divers tutos que j'ai pu lire, j'ai du mal a comprendre comment placer les éléments.

  • #2
    Salut,
    apparemment, tu coinces sur "order".

    D'abord une très bonne référence :

    CSS Flexible Box Layout - CSS: Cascading Style Sheets | MDN
    The CSS flexible box layout module defines a CSS box model optimized for user interface design, and the layout of items in one dimension. In the flex layout model, the children of a flex container can be laid out in any direction, and can "flex" their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated.


    order -> https://developer.mozilla.org/en-US/docs/Web/CSS/order
    align-items -> https://developer.mozilla.org/en-US/...SS/align-items

    J'ai fait un exemple qui focalise sur order :



    Joue sur la valeur de :

    .child--featured {
    order: 1;
    }
    1, -1, etc..

    J'ai rajouté une mediaquery sur flex-direction pour montrer la simplicité de l'opération.
    aime ceci.
    Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter lla base de connaissance : https://kb.joomla.fr

    Ce forum, vous l'aimez ? il vous a sauvé la vie ? Vous y apprenez chaque jour ? Alors adhérez à l'AFUJ https://www.joomla.fr/association/adherer

    Commentaire


    • #3
      Merci pour les liens. J'avais déjà vue les articles sur flex de developer.mozilla.org (mais en fait sans avoir vraiment pigé), mais quant tu ma dit de jouer sur la valeur -1 de order j'ai compris et dans mon cas je devais aussi ajouter un flex. Mais il faut aussi jouer dans l'organisation du HTML. Moi j'ai regroupé les div blog-h2 et intro-article de manière a avoir la mise en page que je voulais. Je pense avoir saisi le truc. J'ai mis a jour mon codepen avec le flex.

      En fait j'ai mis un flex car dans un exemple se trouvant dans l'article Ordonner les éléments flexibles (au paragraphe sur order) ce trouvait flex: 1 0 100%; et quant je l'ai mis dans mon codepen ça a marché. Mais sans avoir compris comment marche exactement flex-grow et flex-shrink. Car j'ai utilisé flex avec le block de l'image d'intro et le block où se trouve le titre de l'article et le paragraphe d'intro.

      Commentaire


      • #4
        flex: 1 est un raccourci (shorthand) de :

        flex: 1;
        <=>
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 0%;
        Ca s'applique à l'enfant du conteneur défini par :
        display:flex
        Une bonne explication :
        The flex property is a sub-property of the Flexible Box Layout module.


        Dans cet article, regarde "Related properties" pour les définitions et exemples de :
        Des articles en français :



        N'hésite pas à poser des questions, cela me permet de réviser flex
        Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter lla base de connaissance : https://kb.joomla.fr

        Ce forum, vous l'aimez ? il vous a sauvé la vie ? Vous y apprenez chaque jour ? Alors adhérez à l'AFUJ https://www.joomla.fr/association/adherer

        Commentaire


        • #5
          Bonjour,

          Pour UP, j'ai créé une feuille CSS Flexgrid légère (5.7Ko) qui essaie de gérer tous les cas courants.
          Tu peux regarder son usage ici : https://up.lomart.fr/test/css-flexgrid
          Le fichier SCSS dans UP est documenté. Si cela peut t'aider à voir l'utilisation des propriétés
          J'ai mis en PJ une version non compressé du CSS et le SCSS
          Fichiers joints
          UP, le plugin universel à découvrir sur https//up.lomart.fr
          bgMax
          , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

          Commentaire


          • #6
            Merci pour toutes ces pistes. Je vais me pencher la dessus . Car a voir ce qui est possible de faire avec le peu que j'ai utilisé, j'ai vraiment envie de comprendr.

            Commentaire

            Annonce

            Réduire
            Aucune annonce pour le moment.

            Partenaire de l'association

            Réduire

            Hébergeur Web PlanetHoster
            Travaille ...
            X