Partage
  • Partager sur Facebook
  • Partager sur Twitter

[FlexBox] Mise en page

Sujet résolu
    13 février 2020 à 16:59:06

    Bonjour,

    Mon problème et je le sait très basique, mais malgré mes recherches je n'arrive pas à trouver comment faire ça, à vrai dire CSS et moi on a jamais été bien copain ! ^^

    Sur l'image suivante, voici comment sont mes bloques :

    et Voilà comment j'aimerais qu'il soit placé :

    Les trois bloques sont dans un <div> en id conteneur, le premier à la class info le deuxième la class menu et le troisième la class articles.

    Pouvez-vous m'aider à mettre mes trois bloques comme sur la figure deux ?

    Merci par avance :)

    -
    Edité par Jester01 13 février 2020 à 18:15:47

    • Partager sur Facebook
    • Partager sur Twitter
      Staff 13 février 2020 à 17:03:23

      Bonjour,

      Mauvais titre

      Le titre est un élément important qui ne doit pas être négligé. N'oubliez pas cette règle simple : le titre idéal résume la question que vous allez poser en une petite phrase. Il doit permettre aux visiteurs de se repérer facilement dans le forum visité et d'identifier le sujet à sa seule lecture.

      Vous pouvez utiliser divers préfixes comme [Erreur], [MySQL], [Compatibilité], etc... Aussi, pensez à consulter les règles propres à chaque forum (visibles dans les topics épinglés en haut des sections).

      De plus, choisir un bon titre permet de rendre plus faciles les recherches des autres membres.

      Les titres de type "besoin d'aide" ou "problème" ne sont pas tolérés.

      Pour modifier votre titre, éditez le premier message de votre sujet.

      (titre originel : FlexBox)

      Liens conseillés


      Bonjour, place tes block n° 1 et 2 dans un même conteneur.

      • Partager sur Facebook
      • Partager sur Twitter
        13 février 2020 à 18:49:34

        Bonjour,

        J'ai modifié mon titre :)

        J'ai fais ce que tu m'as suggérer en mettant en colonne mes block n° 1 et 2 et c'est nickel, j'ai mis mon block 3 dans un autre conteneur, et là j'ai beau essayer tous ce que je veux, il n'y a pas moyen de la mettre à côté de mes block 1 et 2 il reste obstinément dessous. 

        • Partager sur Facebook
        • Partager sur Twitter
          Staff 13 février 2020 à 18:56:21

          Tu as bien le parent du conteneur 1 et 2 en flex? Et le block 3 est bien frère  du conteneur qui contient 1 et 2?

          Donne nous ton code pour que ce soit plus clair. (en utilisant le  bouton code </> du forum, pas de capture écran)

          • Partager sur Facebook
          • Partager sur Twitter
            13 février 2020 à 19:04:01

            <div id="conteneur"><!--conteneur début-->
            		<div class="info">
            Mon code info
            		</div>
            			<br />
            		<div class="menu">
            			mon code menu
            		</div>
            	</div> <!--Fin conteneur-->
            	<div id="conteneur2"><!--conteneur2 début-->
            		<div class="articles">
            			Mon code article
            	</div>
            </div> <!--conteneur2 fini-->

            Je suppose ^^"

            Après j'ai encore un autre conteneur mais celui là ne me pose pas de problème il est à sa place.

            edit : ça sera mieux avec le css

            #conteneur
            {
                display: flex;
                flex-direction: column;
            }
            
            #conteneur2
            {
            	 display: flex;
            	 align-content: center;
            }
            
            #conteneur3
            {
                display: flex;
            }



            -
            Edité par Jester01 13 février 2020 à 19:18:43

            • Partager sur Facebook
            • Partager sur Twitter
              Staff 13 février 2020 à 19:57:43

              re,

              j'aurais plus vu cela comme ceci :

              <div id="conteneur"><!--conteneur début-->
                          <div><!--conteneur du block 1 et 2 mais pas en flex-->
                              <div class="info">
                                  Mon code info
                              </div>
                              <!--<br /> un <br> sert à créer un retour ligne dans une portion de texte pas à créer un espacement entre élément -->
                              <div class="menu">
                                  mon code menu
                              </div>
                          </div>
                          <div id="conteneur2"><!--conteneur2 début-->
                          <div class="articles">
                              Mon code article
                          </div>
                      </div> <!--conteneur2 fini-->
                      </div> <!--Fin conteneur-->

              en commentant le L4 de ton CSS.

              tu n'as pas besoin d'indiquer des display flex partout, utilise les flexbox pour leurs propriétés flexible.

              J'ai vu ton édit par la suite, je t'ai fait un exemple de comment j'aurai procédé.

              <!doctype html>
              <html lang="fr">
                  <head>
                      <meta charset="UTF-8">
                      <title>test flexfox</title>
                      <style> 
                          .conteneur {
                              display: flex;
                              justify-content: space-around;
                              border: 1px solid; 
                             
                          }
                          .block {
                              margin-bottom: 20px;
                              min-height: 100px;
                              
                              flex: 1;
                          }
                          .block1 {
                              background: red;
                          }
                          .block2 {
                              background: #22b14c;
                          }
                          .block3 {
                              background: #a349a4;
                          }
                          .row-column {
                              display: flex;
                              flex-direction: column;
                              flex: 1;
                              margin-right: 10px;
                          }
                      
                      </style>
                  </head>
                  <body>
                      <div class="conteneur">
                          <div class="row-column">
                              
                              <section class="block block1">1</section>
                              <section class="block block2">2</section>
                              
                          </div>
                          <section class="block block3">3</section>
                      </div>
                  </body>
              </html>



              Plus d'info sur flexbox lire https://la-cascade.io/flexbox-guide-complet/

              -
              Edité par AbcAbc6 13 février 2020 à 20:06:45

              • Partager sur Facebook
              • Partager sur Twitter
                14 février 2020 à 14:16:49

                Hello,

                Bon, avec ton exemple adapté a mes besoins il y a du mieux, c'est pas encore comme je veux mais c'est un bon début ^^

                du coup je vais regarder la doc que tu as mise et je vais voir comment faire ^^

                Merci déjà pour l'aide :)

                Je ne mets pas le sujet en résolu car je peu potentiellement avoir besoin encore d'aire vu mon niveau inexistant de css ^^

                Edit : Bon, par je ne sait quel miracle, j'ai réussi à faire ce que je voulais :D sujet résolu, merci de ton aide.

                -
                Edité par Jester01 14 février 2020 à 15:01:49

                • Partager sur Facebook
                • Partager sur Twitter

                [FlexBox] Mise en page

                × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                • Editeur
                • Markdown