Discussion :

[pierrot10]

Bonjour

Je reviens avec les flex, et j'ai un peu oublié
Je pars avec ceci


Mon objectif est d'avoir la cadre bleu toujours en butée à droite contre la cadre rouge.

Mon html est comme ceci

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
<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 :

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

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

[mathieu]

essayez "justify-content" à la place de "align-content".
https://css-tricks.com/snippets/css/...ustify-content

[pierrot10]

A oui, ca va mieux. C'est drole, je pensais avoir essayé ca, mais j'ai du mal l'employer merci

[NoSmoking]

Bonjour,
dans la mesure où l'on veut « plaquer » à droite le dernier élément d'un conteneur FLEX on peut également lui affecter une déclaration margin-left:auto.