[Résolu] Grid or not grid

(reprise du message précédent)

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 ....

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)

J'ai fait ceci :

h1{
    position: absolute;
    
}

pour ce rendu, qui me convient.

j'aimerais savoir si c'est laid ? Si oui
quel peut être la solution plus stylée ?
Merci
Guillaume

re,

Il faut rajouter :

.articles{
    display: flex;
    flex-wrap: wrap;
}
.title {
  flex: 1 1 100%;
  text-align:center;
}

https://jsfiddle.net/undless/9y5jobzL/


PS : j'ai pas compris tu truc avec flex:1 1 1;

a écrit :
Dans mon exemple, en plus, je dois mettre flex: 1 1 1, sinon, j'ai ceci ( Capture ecran )
c'est collé à gauche ....

ok merci Laurent.
Oui, avec flex:1 1 1;
sinon, c'es collé à gauche.

AH ! Je vois ce que tu veux dire. En fait non. Quand tu mets flex: 1 1 1; le seul effet que ça a c'est de ne pas reconnaître cette propriété vu que c'est invalide comme je t'ai dit :

Du coup il se décolle juste parce qu'il reprend un positionnement pas vraiment défini.
En vrai si tu mets un bord rouge tu verras que toutes les colonne se touchent c'est le comportement normal du flex :

Si tu veux des espaces tout autour tu peux rajouter un padding: 10px; sur le parent.
Si tu veux un espace juste autour d'une colonne tu peux mettre un margin (et/ou un padding) sur la colonne en question.
Si tu veux un espace entre les colonnes il faut mettre gap: 10px; sur le parent.

Je t'ai mis un peu tout en vrac pour que tu vois :
https://jsfiddle.net/undless/9y5jobzL/

[Ooups je viens de me rendre compte que le post avait une page 2, donc ce que tu liras ci-dessous a déjà été dit]

Salut,

Si j'ai bien compris, tu dois avoir un h1, qui est dans ton conteneur flex, mais tu souhaites qu'il apparaisse au-dessus des items.
Si c'est bien ça, c'est relativement simple :
1) Tu mets

flex-wrap: wrap

à ton ... wrapper (humour pourri du lundi matin, bonjour)
2) tu mets ton h1 en

flex: 0 0 100%

, ce qui signifie littéralement "toute la largeur, ne grandis pas ne rapetisse pas"
Et voilou
Modifié par Marvin Le Rouge (24 Aug 2020 - 08:57)

Jean-Pierre-Bruneau a écrit :

Vraiment je rêves, tu écrit cela juste derrière ma longue explication

Alors je te le dit à nouveau NON Flex n'est en rien un conteneur, puisqu'il est Unidirectionnelle
Oui Grid est un conteneur et même un conteneur de luxe puisqu'il est Bidirectionnelle !

Salut !

Perso j'avais rien compris a ton premier commentaire. La je comprend un peu ce que tu dis mais je ne vois pas pourquoi tu dis que flex n'est pas un conteneur alors que Grid oui... les deux sont des propriétés de display qui vont définir le placement de leurs enfants.
Ce sont tout deux des layout, flex pour une seule dimension et grid pour une ou deux dimension.
Un conteneur c'est quelque chose qui contient d'autres trucs. Un conteneur peut être en display block ça change rien. Je ne vois pas le parallèle que tu essaies de faire...
Modifié par _laurent (24 Aug 2020 - 18:57)

Jean-Pierre-Bruneau a écrit :
un DIV dont la Class à été définie comme un GRID peut contenir des paramètres FLEX , l'inverse NON !!

Ca par exemple je vois pas ce que ca veut dire... tu as un exemple ?

Bonjour à tous,
Jean Pierre, je n'ai pas encore le recul pour apprécier toute la puissance de GRID.
Ni pour faire un vrai choix entre ces 2 possibilités.

D'ailleurs, je bloque toujours sur un détail.
Vous me parlez de la commande flex.
Mais par exemple le code donné par Marvin

flex: 0 0 100%;

Vous pouvez m'expliquer à quoi correspond le premier 0, le deuxième
et le 100% ?

Guillaume

gillaume a écrit :

flex: 0 0 100%;

Vous pouvez m'expliquer à quoi correspond le premier 0, le deuxième
et le 100% ?

Hello
flex-grow
flex-shrink
flex-basis

Plus d'infos : https://www.alsacreations.com/tuto/lire/1493-CSS3-Flexbox-Layout-module.html

Merci à vous tous.