Disposer mes éléments sur 2 lignes

**Tamzoro** · 07/06/2021, 09h50

Bonjour,

Je souhaiterai afficher mes 6 éléments sur 2 lignes, c'est à dire 3 items centrer sur la première ligne et et les 3 éléments sur la seconde ligne.

En cherchant sur google, on pourrait le faire avec la propriété flex-wrap: wrap;
https://developer.mozilla.org/fr/docs/Web/CSS/flex-wrap

J'ai essayé ceci mais ça n'a pas l'air de fonctionner...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
.service .flex-container {
  width: 70%;
  display:flex;
  margin: 0 auto;
  flex-wrap: wrap;
 
}

Voici une aide de mon HTML et CSS, je vous remercie pour votre aide.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
50
51
52
53
54
55
56
57
58
<!-- Service Start -->
        <div class="service">
 
             <div class="flex-container">
 
               <div class="service-item"> 
                <div class="row">
                  <div class="icone"></div>
                  <h3 class="service-title">Heal emotions</h3>
                  <p class="service-text">Lorem ipsum dolor sit amet elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non</p>
                </div>
              </div>
 
              <div class="service-item">
                <div class="row active">
                  <div class="icone"></div>
                  <h3 class="service-title">Body Refreshes</h3>
                  <p class="service-text">Lorem ipsum dolor sit amet elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non</p>
                </div>
              </div>
 
              <div class="service-item">
                <div class="row">
                  <div class="icone"></div>
                  <h3 class="service-title">Body Refreshes</h3>
                  <p class="service-text">Lorem ipsum dolor sit amet elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non</p>
                </div>
              </div>
 
             <div class="service-item">
                <div class="row">
                  <div class="icone"></div>
                  <h3 class="service-title">Body Refreshes</h3>
                  <p class="service-text">Lorem ipsum dolor sit amet elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non</p>
                </div>
              </div>  
 
             <div class="service-item">
                <div class="row">
                  <div class="icone"></div>
                  <h3 class="service-title">Body Refreshes</h3>
                  <p class="service-text">Lorem ipsum dolor sit amet elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non</p>
                </div>
              </div>
 
             <div class="service-item">
                <div class="row">
                  <div class="icone"></div>
                  <h3 class="service-title">Body Refreshes</h3>
                  <p class="service-text">Lorem ipsum dolor sit amet elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non</p>
                </div>
              </div>  
 
 
 
          </div>
        </div>
        <!-- Service End -->

CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
/*******************************/
/********* Service CSS *********/
/*******************************/
 
 
.service {
    position: relative;
    width: 100%;
}
 
.service .flex-container {
  width: 70%;
  display:flex;
  margin: 0 auto;
  flex-wrap: wrap;
 
}
 
.service-item {
  flex: 1;
  width: 0;
 
}
 
.service-item:not(:last-child) {
  margin-right: 1em;
}
 
 
.service .row {
  border: 1px solid ;
  margin: 0;
  padding: 0;
 
}
 
.service .row .icone {
  width: 100px;
  height: 100px;
  background: #F4B7DB;
  border-radius: 50%;
  margin: 23px auto 0 auto;
}
 
.service .row .service-title {
  font-size: 1.5em;
  text-align: center;
  font-weight: 600;
  transition: .3s;
}
 
.service .row .service-text {
  font-size: 18px;
  text-align: center;
  margin: 0px 15px 20px 15px;
}
 
 
.service .row:hover,
.service .row.active {
  background: #343148;
  color: #ffffff;
}
 
.service .row:hover h3,
.service .row.active h3 {
    color: #F7CAC9;
}

**vttman** · 07/06/2021, 17h52

En utilisant 2 fois la class "flex-container" ?
ex :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
50
51
52
53
54
55
56
 
        <div class="service">
 
            <div class="flex-container"> <!-- ************** ICI *********** -->
 
               <div class="service-item"> 
                <div class="row">
                  <div class="icone"></div>
                  <h3 class="service-title">Heal emotions</h3>
                  <p class="service-text">Lorem ipsum dolor sit amet elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non</p>
                </div>
              </div>
 
              <div class="service-item">
                <div class="row active">
                  <div class="icone"></div>
                  <h3 class="service-title">Body Refreshes</h3>
                  <p class="service-text">Lorem ipsum dolor sit amet elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non</p>
                </div>
              </div>
 
              <div class="service-item">
                <div class="row">
                  <div class="icone"></div>
                  <h3 class="service-title">Body Refreshes</h3>
                  <p class="service-text">Lorem ipsum dolor sit amet elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non</p>
                </div>
              </div>
            </div> <!-- ************** on ferme ICI *********** -->
            <div class="flex-container"> <!-- ************** ICI *********** -->
               <div class="service-item">
                <div class="row">
                  <div class="icone"></div>
                  <h3 class="service-title">Body Refreshes</h3>
                  <p class="service-text">Lorem ipsum dolor sit amet elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non</p>
                </div>
              </div>  
 
             <div class="service-item">
                <div class="row">
                  <div class="icone"></div>
                  <h3 class="service-title">Body Refreshes</h3>
                  <p class="service-text">Lorem ipsum dolor sit amet elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non</p>
                </div>
              </div>
 
             <div class="service-item">
                <div class="row">
                  <div class="icone"></div>
                  <h3 class="service-title">Body Refreshes</h3>
                  <p class="service-text">Lorem ipsum dolor sit amet elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non</p>
                </div>
              </div>  
 
          </div> <!-- ************** ICI *********** -->
        </div> <!-- ************** ICI *********** -->

**Tamzoro** · 07/06/2021, 19h48

Bonsoir vttman,

C'est ce que j'avais fait sauf que je ne sais pas si c'est une bonne méthode?

**vttman** · 07/06/2021, 20h22

... en css, il me semble, que c'est déjà bien d'arriver au résultat que l'on souhaite aux résolutions les plus répandues (PC, tablette, smartphone, TV HD etc.) et sur les navigateurs les plus courants.
Est-ce suffisant ? Pour les puristes surement NON ! il y a aura toujours à redire ... et à apprendre (tant mieux)

**Tamzoro** · 08/06/2021, 02h42

Tu as raison... Merci pour tes explications. Je vais suivre tes conseils.

**NoSmoking** · 08/06/2021, 11h55

Bonjour,

Envoyé par vttman

En utilisant 2 fois la class "flex-container" ?

on peut s'en passer en initialisant la propriété flex-basis sur les éléments service-item :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
.service-item {
  flex: 1 0 33%;     /* ajout flex-basis */
  width: auto;       /* mettre à auto */
}
.service-item:not(:last-child) {
/* margin-right: 1em; /* a supprimer */
}

Envoyé par Tamzoro

C'est ce que j'avais fait sauf que je ne sais pas si c'est une bonne méthode?

Moins tu as d'éléments dans ton code meilleur cela sera, et tu peux même déplacer/ajouter des classes dans ton cas pour supprimer un élément <div> inutile :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<div class="service-item row"> 
  <!--<div class="row">-->
    <div class="icone"></div>
    <h3 class="service-title">Heal emotions</h3>
    <p class="service-text">Lorem ipsum dolor sit amet elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non</p>
  <!--</div>-->
</div>

**Tamzoro** · 20/06/2021, 20h53

Bonsoir,

Merci beaucoup pour tes explications NoSmoking.

Disposer mes éléments sur 2 lignes

Tableau en CSS

Vue hybride

Discussions similaires

Partager

Partager