Flexbox non pris en compte

**laurentSc** · 02/11/2022, 15h47

Bonjour,
pas très à l'aise avec les outils de développement, j'essaye quand même de m'en servir, vu que sur ma page, le CSS ne semble pas pris en compte. Mon navigateur est Firefox.
Ayant des soucis, j'ai simplifié à l'extrême pour mettre en évidence le problème.

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
<!doctype html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Titre de la page</title>
    <link rel="stylesheet" href="style2.css">
 
</head>
<body>
<!--Top Example-->
<main div="main-mention-legales">
    <div id="mention-legales-col1">
        col 1
    </div>
    <div id="mention-legales-col2">
       col 2
    </div>
 
</main>
<br/>
</body>

Code css :

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
 
/* mentions légales */
main-mention-legales{
    display:flex;
    flex-direction:row;
    justify-content:space-around;
    text-align:left;
}
 
#mention-legales-col1{
    order:1;
}
 
#mention-legales-col2{
    order: 2;
}
 
#mention-legales-col1,#mention-legales-col2{
    height:40px;
    border:3px;
    border-color:#000;
    border-style: solid;
    margin-right:5px;
    padding-left:20px;
    width:50px!important;
}

y a 90% de chances que ça soit un bug de débutant, mais merci de me dire ce qui cloche. Je souhaite que les 2 div soient alignées sur la même ligne alors que la 2e est sous la première.

**laurentSc** · 02/11/2022, 16h29

C'était truffé de bugs de débutants

La bonne version :

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
<!doctype html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Titre de la page</title>
    <link rel="stylesheet" href="style2.css">
 
</head>
<body>
<!--Top Example-->
<div id="main-mention-legales">
    <div id="mention-legales-col1">
        col 1
    </div>
    <div id="mention-legales-col2">
       col 2
    </div>
 
</div>
<br/>
</body>

Code css :

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
 
/* mentions légales */
#main-mention-legales{
    display:flex;
    flex-direction:row;
    justify-content:space-around;
    text-align:left;
}
 
#mention-legales-col1{
    order:1;
}
 
#mention-legales-col2{
    order: 2;
}
 
#mention-legales-col1,#mention-legales-col2{
    height:40px;
    border:3px;
    border-color:#000;
    border-style: solid;
    margin-right:5px;
    padding-left:20px;
    width:50px!important;
}

Flexbox non pris en compte

Positionnement en CSS avec flexbox

Discussions similaires

Partager

Partager