Grid ou FlexBox

Version imprimable

21/11/2021, 12h45
Alex1234567

Grid ou FlexBox

Bonjour,
comment reproduire ceci, voir lien, en grid ou flexbox

lien du site https://www.hollandbikes.com/content...o-longue-duree
21/11/2021, 14h03
jreaux62

Bonjour,

Tu as fait un minimum de recherche avant,
Ou tu cherches juste un pigeon pour faire le boulot ? :weird:
21/11/2021, 14h19
Alex1234567

oui j'ai fait des recherches. je peux mettre les catégories dans un grid de 2x2 et le texte au dessus ou dans une case qui prend toute la largeur ? Puis je mettre flex-direction: row dans une case du grid pour mettre l'icone et le texte à côté ou flex-direction: column pour mettre les 2 textes l'un au dessus de l'autre ?
21/11/2021, 14h35
jreaux62
Déjà,
commencer par regarder dans l'inspecteur" (-> touche clavier F12) :
- le code HTML de ta copie d'écran
- et aussi les CSS appliqués
Nous montrer l'URL de la page, et/ou ton propre code HTML aiderait...

N.B. Perso, j'opterai pour flexbox.
21/11/2021, 14h54
Alex1234567

le lien du site https://www.hollandbikes.com/content...o-longue-duree

il y a beaucoup trop d'éléments
21/11/2021, 15h11
jreaux62

OUI... OK
C'est du Wordpress, avec Elementor : le code est une usine à gaz... :aie:
21/11/2021, 15h22
Alex1234567

comment je peux faire ducoup :roll:

J'y ai travaillé ;)

Une base de départ :

https://codepen.io/jreaux62/pen/abyxWyE

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<section id="section-location">
  <h2 class="section-title">La location de vélo longue durée, comment ça marche ?</h2>
  <div class="section-content">
    <p>Grâce à notre service de location de vélo longue durée (LLD), nous vous offrons la possibilité de rouler sur un vélo haut de gamme pour la durée de votre choix (entre 12 et 48 mois). A la fin de la période, vous n’aurez qu’une chose à penser : nous restituer le vélo. Fini les soucis liés à la perte de valeur de votre vélo, au prix des pièces à changer (telles que la batterie) ou aux démarches pour revendre ou changer de vélo&nbsp; !</p>
  </div>
  <div id="flex-box-1" class="flex-box flex-wrap">
 
    <div class="flex-item card">
      <div class="card-icon">
       <img src="https://www.developpez.net/forums/avatars/1779489-jreaux62.gif?dateline=1624179245" alt="icone 1"/>
      </div>
      <div class="card-body">
        <h4 class="card-title">Card title 1</h4>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>
 
    <div class="flex-item card">
      <div class="card-icon">
       <img src="https://www.developpez.net/forums/avatars/1779489-jreaux62.gif?dateline=1624179245" alt="icone 1"/>
      </div>
      <div class="card-body">
        <h4 class="card-title">Card title 2</h4>
        <p class="card-text">Quod Mediolanum hiberna pacem Mediolanum ad maxime bella in gentium.</p>
      </div>
    </div>
 
    <div class="flex-item card">
      <div class="card-icon">
       <img src="https://www.developpez.net/forums/avatars/1779489-jreaux62.gif?dateline=1624179245" alt="icone 1"/>
      </div>
      <div class="card-body">
        <h4 class="card-title">Card title 3</h4>
        <p class="card-text">Conterminis alimenta specie quod sed profecturus plebi invito profecturus per.</p>
      </div>
    </div>
 
    <div class="flex-item card">
      <div class="card-icon">
       <img src="https://www.developpez.net/forums/avatars/1779489-jreaux62.gif?dateline=1624179245" alt="icone 1"/>
      </div>
      <div class="card-body">
        <h4 class="card-title">Card title 4</h4>
        <p class="card-text">Cum causa Valerius Reguli mariti amicorum humatur mariti subsidiis virginis.</p>
      </div>
    </div>
 
  </div>
</section>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#section-location {
  max-width:1200px;
  margin:20px auto;
}
.section-title { text-align:center; }
.section-content { padding:0 0 20px 0; }
 
/* flexbox*/
.flex-box { display:flex; }
.flex-wrap { flex-wrap:wrap; }
 
#flex-box-1 .flex-item { flex:1 1 100%; } /* 1 par ligne */
@media screen and (min-width:768px) {
  #flex-box-1 .flex-item { flex:1 1 50%; } /* 2 par ligne */
}
 
#flex-box-1 .card { display:flex; }
#flex-box-1 .card .card-icon { }
#flex-box-1 .card .card-body { padding:0 20px 10px; }

21/11/2021, 19h13
Alex1234567

Merci beaucoup ;)

Pourquoi tous les icones, titres, textes se mettent à gauche quand je change le nom de la class et id de <div id="flex-box-1" class="flex-box flex-wrap"> (je n'ai pas encore mis le css)
21/11/2021, 19h14
jreaux62

[...]
21/11/2021, 19h15
Alex1234567

c'est normal ou je peux quand meme changer le nom ?
21/11/2021, 19h16
jreaux62

#flex-box-1 est utilisé dans le CSS.

Si tu changes de nom (id, class) dans le HTML, il faut aussi le faire dans le CSS.
21/11/2021, 19h18
Alex1234567

Oui bien evidemment, mais à ce moment la je n'avais pas encore mis de css mais meme quand je change le nom de class et id dans le html et css, la disposition change. Et à quoi sert max-width et @media screen pourrais tu m'expliquer ?