18008 sujets

Questions générales et questions de débutants

[Résolu] Grid or not grid

Pages :
Bonjour à tous,
je débute, et ça se voit.
Mais j'adore. Smiley biggrin

Voici mon challenge. refaire ceci en css.
En image upload/1597591560-79979-1.png
Comme je commence à bien comprendre le mode grid et flex,
je me pose en continu : flex ? ou grid ?
Peut être que c'est plus facile sans l'un ni l'autre.
Donc pouvez vous me dire quelle solution est la judicieuse ...
Merci d'avance
Guillaume Smiley smile
Les deux fonctionnerons. Si vous n'êtes pas regardant sur le support navigateur vous pouvez utiliser grid d’emblée.
Salut,
je pensais qu'il y avait une solution intermédiaire, plus élégante que
faire une grille et placer les éléments.

Pour flex, tu verrais comment ? je peux avoir un aperçu ?
Modérateur
Salut,

Grid marche bien mais je trouve pas ça hyper adapté sur cet exemple (pas de plus-value quoi, et coté responsive ca sera relou à gerer pour le coup). J'aurais fait 4 colonnes en flex ou inline-block perso.
C'est un peu ce que je pensais.
_Laurent, je peux avoir un aperçu des 4 colonnes en flex stp ?
Modifié par gillaume (17 Aug 2020 - 09:54)
Allez, sérieux ! Smiley biggrin
je me doute qu'il y aura du space around ou du between.
Mais je sèche pour la mise en forme en flex...
Please
Modérateur
Bah juste un wrapper avec 4 div dedans. display:flex; sur le wrapper et flex: 1 1; sur les colonne si tu veux qu'elle prennent toute la largeur sinon un flex:0 0 200px; y'a pas plus simple.

Tiens lis ca t'en a pour 5 min et tu seras opé : https://www.alsacreations.com/tuto/lire/1493-CSS3-Flexbox-Layout-module.html

SI t'y arrive toujours pas revient avec ton code on t'aidera à la corriger avec plaisir Smiley cligne
Modifié par _laurent (17 Aug 2020 - 11:41)
Modérateur
Bah montre quand même ! Au pire tu te débloquera tout seul. Parfois formuler le problème clairement pour faire un post aide a le résoudre Smiley smile
Modifié par _laurent (17 Aug 2020 - 17:12)
Le souci, c'est que j'ai fait tellement de tests, de recherches, que
je ne sais plus où chercher.
Et que mon code est quasiment vide. ...
ok, oui. Exact.

Alors le html :
<div class="articles">

          <div class="topic">articles de blog</div>
          <div class="topic">articles de blog</div>
          <div class="topic">articles de blog</div>
          <div class="topic">articles de blog</div>

          <div class="topic2">articles</div>
          <div class="topic2">articles</div>
          <div class="topic2">articles</div>
          <div class="topic2">articles</div>

        </div>


CSS
.articles{
    display: flex;
    flex-direction: column;
    flex: 1 1;
    border: aqua solid;
}

.topic .topic2 {
    border: solid black;
}


je suis perdu. Même la bordure de topic et topic2 a disparu ....

upload/1597684909-79979-1.png
Modérateur
Ok, t'es pas bien loin !

Alors plusieurs choses :
.topic .topic2 {
    border: solid black;
}

Il faut une virgule entre les deux parceque la ton sélecteur CSS va chercher les élément qui ont un classe "topic2" et qui sont des enfant d'éléments qui ont la classe "topic". En gros il cherche ça :
<div class="topic">
          <div class="topic2">articles</div>
</div>

Mais ca existe pas.
.topic,
.topic2 {
    border: solid black;
}

Avec une virgule ce sont 2 sélecteurs de classe simple.

Ensuite coté flex:
flex-direction: column;

la direction column c'est pour les empiler les un au dessous des autres c'est pas ce que tu veux. Ne mets rien, l'empilement par défaut c'est en ligne.
flex: 1 1;

se met sur la colonne (l'enfant) pas sur le conteneur (relis ce que j'ai écris plus haut)

Et voila t'y es :
https://jsfiddle.net/undless/p7hye6t2/
Meilleure solution
ok
merci Smiley cligne
la virgule, c'est quelque chose que je découvre.
Alors que j'ai lu des dizaines de pages de cours....
Je suis passé à côté.

Alors, j'y suis presque.

.articles{
    display: flex;
    justify-content: space-between;

}
.topic, .topic2 {
    border: solid black;
}


ça me donne ceci. ( capture )
C'est beaucoup beaucoup mieux. upload/1597757571-79979-1.png
je continue.
Guillaume
upload/1597826748-79979-1.png
Bonjour,
c'est bon. Réussi.
Merci Laurent Smiley biggrin

J'ai une dernière petite question.
Quel est le role de flex: 1 1; ?
je ne comprends pas cette commande.

Dans mon exemple, j'ai mis
.topic, .topic2 {
    flex: 1 1 1;
    
}


avec flex: 1 1;, j'ai les éléments collés à gauche ...
Guillaume
Modérateur
gillaume a écrit :
c'est bon. Réussi.

Cool ! Smiley smile

gillaume a écrit :
Quel est le role de flex: 1 1; ?

-> https://developer.mozilla.org/fr/docs/Web/CSS/flex
gillaume a écrit :
La propriété flex est une propriété raccourcie qui définit la capacité d'un élément flexible à modifier ses dimensions afin de remplir l'espace disponible de son conteneur.
Les propriétés détaillées correspondantes à cette propriété raccourcie sont flex-grow, flex-shrink et flex-basis.

mettre flex: 1 1; ca dire a ta colonne de prendre toute la place dispo : qu'il peut s’élargir (grow) ou se rétrécir (shrink) au delà de sa taille de base. C'est un facteur de grossissement donc si tu veux qu'une colonne prenne 2 fois plus de place que les autres, tu metx toutes les colonnes a flex: 1 1; seuf celle ci et tu lui mets flex: 2 1;

c'est pas un concept très évident au début.

Le troisième chiffre c'est pour donner la "taille de base" donc flex: 1 1 1; n'a pas trop de sens.

gillaume a écrit :
avec flex: 1 1;, j'ai les éléments collés à gauche ...

Mmmmmh je vois pas trop pourquoi...
Salut,

Un des avantage de grid ici serait d'avoir des sections (typiquement le bloc de texte sous le titre) qui aient visuellement la même hauteur, même si leurs contenus ont des longueurs différentes. Donc, si tu souhaites que les titres soient alignés entre eux, les textes aussi et les liens du bas tous au même niveau, c'est nickel.
upload/1598008372-79979-1.png Bon, j'ai quasiment fini.
Nickel.
par contre, la commande flex: 1 1; m'échappe.
je ne la comprends pas. c'est sûrement l'effet mois d'août .... Smiley biggrin

Dans mon exemple, en plus, je dois mettre flex: 1 1 1, sinon, j'ai ceci ( Capture ecran )
c'est collé à gauche ....
.articles{
    display: flex;
    justify-content: space-around;
    border: #242016 solid;
}
.test, .test2{
    border: 1px green solid;
    font: 10px;
    margin-top: 50px;
    text-align: center;
}
.topic, .topic2 {
    flex: 1 1;
}


<div class="articles">

          <div class="topic">articles de blog
              <div class="test">gui</div>
              <div class="test2">llaume</div>
          </div>
          <div class="topic">articles de blog</div>
          <div class="topic">articles de blog</div>
          <div class="topic">articles de blog</div>

          <div class="topic2">articles</div>
          <div class="topic2">articles</div>
          <div class="topic2">articles</div>
          <div class="topic2">articles</div>

        </div>

J'ai un autre micro souci, je voudrais mettre un titre en h1 par exemple,
au dessus de mes DIV en flex.
Le souci, c'est que le h1 est pris dans le flex. Donc il n'est pas au dessus.
une idée ?
Modifié par gillaume (21 Aug 2020 - 13:13)
Pages :
Sujet clos
Aller à