Discussion :

[moimp]

Bonjour,
Dans la balise <header> suivante, je voudrais mettre le premier élément à gauche (c'est OK) et les suivants répartis dans l'espace restant.
La ligne 12 du CSS n'est pas appropriée. Si je mets 100% le bloc s'affiche en dessous. Si je mets 80% comme ici, le bloc prend une place arbitraire qui dépend de la fenêtre. Je voudrais que le bloc occupe toute la place disponible quelque soit le nombre d'éléments dans le deuxième div.
Si je supprime la ligne 12 ou si je la remplace align-items:stretch, je serre tout le bloc à gauche.

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
<header>
	<div id="headerCalendar">
		<span id="calendarSpan"></span>
	</div>
	<div>
		<img src='<?= DIR_IMAGES; ?>logo_sirep.png' alt='logo_sirep' />
		<h1><?= H1; ?></h1>
		<?php
                if ( isset($subscribers->id) ) {
                        $imgSrc = getFirstImageFromBasename("subscribers/$subscribers->id/images/logo*");
                        if ( $imgSrc ) { echo "<img src='$imgSrc' alt='custom_logo' />"; }
                }
                ?>
	</div>
</header>

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
header
{
	width:100%;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	/*justify-content:space-around;*/
	justify-content:flex-start;
}
header div:nth-child(2)
{
	width:80%; /* Valeur gênante */
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:space-around;
	border:1px solid; /* Pour test uniquement */
}

[Invité]

Bonjour,

1- ce n'est pas la 1ère fois qu'on te demande (dans le forum CSS) de mettre le code HTML généré, pas le code PHP... Si ?
Merci.

2- Remplace

Code :

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

	width:80%; /* Valeur gênante */

par

Code :

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

	flex:1 1 100%;

[moimp]

1- C'est vrai, désolé pour cet oubli! Je pense que maintenant, il n'est plus d'aucune utilité. J'ai juste besoin d'un éclaircissement sur la dernière ligne de ce post.

Code :

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

	flex:1 1 100%;

2- Le troisième paramètre fait passer le bloc à la ligne, si je le supprime le fonctionnement est correct. J'ai regardé la doc sur MDN mais je ne vois pas à quoi correspond la valeur par défaut de 1 pour flex-basis.

[Invité]

Ah oui !

Il faut aussi remplacer

Code :

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

1
2
3
4
header {
...
	flex-wrap:wrap;
...

par

Code :

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

1
2
3
4
header {
...
	flex-wrap:nowrap;
...