Pages :
(reprise du message précédent)

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)
J'ai fait ceci :
h1{
    position: absolute;
    
}


pour ce rendu, qui me convient. upload/1598022093-79979-1.png

j'aimerais savoir si c'est laid ? Si oui Smiley lol
quel peut être la solution plus stylée ?
Merci
Guillaume
Modérateur
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 ....
Modérateur
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 :
upload/1598050448-42161-capture.jpg
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 :
upload/1598050575-42161-capture2.jpg
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/
gillaume a écrit :
Bonjour à tous,
.......... Merci d'avance
Guillaume Smiley smile

Bonjour à toi, ton sujet est intéressant mais si tu me permet je voudrais te préciser UN POINT fondamental:
ici beaucoup d'intervenants t'on dit ou conseillé plein de choses exactes, mais si je reprends ta question d'origine, personne ne semble t'avoir précisé qu'il n'existe AUCUN rapport entre Grid et Flex !
Alors je me permets de t'expliquer cet aspect :
Définir un découpage GRID d'une page HTML ou d'une partie de page ou encore mieux de plusieurs parties de page est donner une puissance énorme tant il simplifie le placement dans une page finale, et automatiser le "responsive design" (avec les Media Queries).

ALORS FLEX ?
Voila qui est plus clair ,ainsi tu ne fera plus l'erreur de énoncé de ta question si pour simplifié les choses tu considères le GRID comme un SUPER-DIV rien d'autre... et donc qu'il en découle que en HTML5 le Flex est un atout majeure, mais n'est rien d'autre bien que plus puissant qu'un nouvel attribut comme "max-width :900px;" et mille autres indicateurs. CSS

Donc tu peux mettre du FLEX partout, dans une page HTML classique, ou dans tout conteneurs dont cela n'a rien avoir !
[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)
Marvin Le Rouge a écrit :

tu dois avoir un h1, qui est dans ton conteneur flex,

Vraiment je rêves, tu écrit cela juste derrière ma longue explication
Smiley confused
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 !
Modérateur
Jean-Pierre-Bruneau a écrit :

Vraiment je rêves, tu écrit cela juste derrière ma longue explication
Smiley confused
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)
_laurent a écrit :

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

J'ai voulu mais je m’exprime mal, dire qu'un DIV dont la Class à été définie comme un GRID peut contenir des paramètres FLEX , l'inverse NON !! Prends du recul tu verra ...
Modérateur
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% ? Smiley eek Smiley eek

Guillaume Smiley biggol