web-dev-qa-db-fra.com

float ne fonctionne pas dans un conteneur flexible

Je souhaite positionner le texte (lien foo) à droite de l'élément de pied de page.

J'ai besoin de l'affichage du pied de page pour rester flex.

Mais quand je le fixe à flex, float:right pour span ne fonctionne plus.

<footer style="display: flex;">
     <span style="text-align: right;float: right;">
        <a>foo link</a>
     </span>
</footer>

https://jsfiddle.net/dhsgvxdx/

htmlcsshtml5css3flexbox
37
mlibre

La propriété float est ignorée dans un conteneur flex.

De la flexbox:

3. Conteneurs Flex: les flex et inline-flex valeurs d'affichage

Un conteneur flex établit un nouveau contexte de formatage flex pour son contenu. Cela revient à établir un contexte de formatage de bloc, sauf que flex layout est utilisé à la place de block layout.

Par exemple, les objets flottants ne pénètrent pas dans le conteneur flexible et les marges de ce dernier ne s’effondrent pas avec les marges de son contenu.

float et clear ne créent pas d'élément flottant ni d'espacement des éléments flexibles et ne le sortent pas de leur flux.

Au lieu de cela, utilisez simplement les propriétés flex:

footer {
    display: flex;
    justify-content: flex-end;
}
<footer>
    <span>
       <a>foo link</a>
    </span>
</footer>

Si vous avez plus d'éléments dans le pied de page et avez besoin d'autres options d'alignement, voici deux guides:

38
Michael_B

Cela fonctionne si vous ajoutez margin-left: auto; comme dans jsfiddle: https://jsfiddle.net/dhsgvxdx/3/

<body>
    <footer style="display: flex;">
        <span style="text-align: right;float: right; margin-left: auto;">
            <a>foo link</a>
        </span>
    </footer>
</body>
32
D.Soderberg

Si ce pied de page doit uniquement contenir un élément aligné à droite, vous pouvez simplement appliquer justify-content: flex-end au conteneur flex. De cette façon, vous ne devez ajouter aucun style à ses enfants.

footer {
  display: flex;
  justify-content: flex-end;
}

exemple de Codepen

3
alanbuchanan