1 pièce(s) jointe(s)
[Flex] comment faire pour que la colonne de droite soit alignée à droite du container
Bonjour
Je reviens avec les flex, et j'ai un peu oublié :)
Je pars avec ceci
Pièce jointe 650460
Mon objectif est d'avoir la cadre bleu toujours en butée à droite contre la cadre rouge.
Mon html est comme ceci
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
| <header>
<div class="left">
<div id="logo">
<figure>
<img src="img/logo-EMP.png" alt="Ecole de musique de Pully">
</figure>
</div>
</div>
<div class="right">
<div id="serach">
search
</div>
<!-- Menu -->
<div id="f-menu-horizontal">
<nav class="menu" aria-label="Main navigation">
<ul>
<li>
<div>
<a href="#">Accueil</a>
</div>
</li>
</ul>
</nav>
</div><!-- end menu -->
</div> <!-- end right -->
</header> |
et j'ai commencé comme ceci avec mon CSS
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| header{
display: flex;
flex-direction: row;
align-content: space-between;
}
header .left{
border:3px solid green;
flex: 0 0 150px;
}
header .right{
border:3px solid blue;
flex: 0 1 600px;
border-left: 1px solid rgba(255, 255, 255, 0.15);
} |
J'ai essayé de mettre justify-content: flex-end; dans le header, mais les deux colonnes partent à droite.
J'ai essayé de mettre ceci dans .right, sans succès et le align-content n'agit pas non plus. Pourtant il ne devrait mettre les deux colonnes en buttée, à gauche et à droite?
Merci
