web-dev-qa-db-fra.com

propriété de justification de contenu ne fonctionne pas

J'ai un problème étrange avec lequel j'ai des problèmes. J'ai donc travaillé sur ce prototype de modèle html5 qui utilise flexbox. Bien que je rencontre un petit problème. J'essaie de placer un petit espace dans la barre latérale et dans la zone de contenu du modèle en appliquant la propriété "justifier-contenu" au div parent. Bien qu'il ne s'agisse pas d'ajouter cet espace entre la barre latérale et la zone de contenu. Je ne suis pas sûr de ce que je fais mal. Donc, si quelqu'un pouvait m'aider, ce serait génial. Merci d'avance!

Voici mon HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="../scripts/javascript/responsive_drop_down.js"></script>
    <link href="../css/protoflexcss.css" rel="stylesheet" type="text/css" media="screen"/>
    <title>Welcome to My Domain</title>
</head>
<body>    
        <header>
            <h1>This is a placeholder <br />
                for header</h1>
        </header>
            <nav class="main">
                <div class="mobilmenu"></div>
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Video</a></li>
                        <li><a href="#">Pictures</a></li>
                        <li><a href="#">Audio</a></li>
                        <li><a href="#">Other Work</a></li>
                        <li><a href="#">About Me</a></li>
                        <li><a href="#">Contact Me</a></li>
                    </ul>    
            </nav>
            <div id="wrapper">
                <article class="content-main">
                    <section>
                        <h2>Heading goes here...</h2>
                        <time datetime="2014-05-21T02:43:00">Officialy Posted On May 21<sup>st</sup> 2:35 A.M.</time>
                        <p>Content will go here...</p>
                    </section>
                </article>
                <aside>
                    <p>More content soon...</p>
                </aside>
        </div>
        <footer>
                <div class="copyright">
                    <span>All rights reserved 2014.</span>
                </div>
            <nav class="foot">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Video</a></li>
                    <li><a href="#">Pictures</a></li>
                    <li><a href="#">Audio</a></li>
                    <li><a href="#">Other Work</a></li>
                    <li><a href="#">About Me</a></li>
                    <li><a href="#">Contact Me</a></li>
                </ul>
            </nav>
        </footer>               
   </body>
</html>

Voici le css pertinent:

#wrapper
{
display: flex;
flex-direction: row;
justify-content: space-around;
flex-flow: row wrap;
flex: 1 100%;
width:92.5%;
align-self: center;
padding-top: 3.5em;
padding-bottom: 2.5em;
margin: 0;
}

#wrapper article.content-main
{
flex: 6;
order: 2;
}

#wrapper article.content-main section
{
background-color: rgba(149, 21, 130, 0.61);
border: 2px solid #c31cd9;
padding: 0.9em;
}

#wrapper aside
{
flex: 1;
padding: 0.4em;
background-color: rgba(17, 208, 208, 0.56);
border: 2px solid #15d0c3;
position: sticky;
}

NOTE: Si quelqu'un a besoin d'un autre élément de mon code CSS lié à l'un des autres éléments de mon code html, veuillez me le faire savoir et je me ferai un plaisir de l'ajouter également à la question.

cssflexboxspacingarticle
40
VEDA0095

justify-contentonly a un effet s'il reste de l'espace après la flexion de vos éléments flexibles pour absorber l'espace libre. Dans la plupart/beaucoup de cas, il ne restera plus d’espace libre, et en effet justify-content ne fera rien.

Quelques exemples où aurait ont un effet:

  • si vos articles flexibles sont tous inflexibles (flex: none ou flex: 0 0 auto) et plus petit que le conteneur.

  • si vos articles flexibles sont flexibles, MAIS ils ne peuvent pas absorber tout l’espace libre en raison d’un max-width sur chacun des éléments flexibles.

Dans les deux cas, justify-content serait chargé de répartir l’espace excédentaire.

Dans votre exemple, cependant, vous avez des éléments flexibles qui ont flex: 1 ou flex: 6 sans max-width limitation. Vos objets flexibles vont absorber tout l’espace libre et il ne restera plus d’espace pour justify-content faire n'importe quoi avec.

81
dholbert

Cette réponse est peut-être stupide, mais j'ai passé du temps à résoudre un problème similaire.

Ce qui m'est arrivé est que je non mis display: flex au conteneur. Et bien sûr, justify-content ne fonctionnera pas sans cette propriété.

18
technophyle

J'ai eu un autre problème qui m'a pris pendant un certain temps lorsque je thématisais du code existant depuis un CMS. Je voulais utiliser flexbox avec justify-content:space-between mais les éléments gauche et droit n'étaient pas alignés.

Dans ce système, les articles flottaient et le conteneur avait un :before et/ou un :after pour effacer les flotteurs au début ou à la fin. Donc, fixant ces sournois :before et :after éléments à display:none a fait le tour.

8
Andyg8

J'avais beaucoup de problèmes avec justification-contenu, et j'ai compris que le problème était "margin: 0 auto"

La partie auto a priorité sur le contenu justifié, de sorte qu'elle est toujours affichée en fonction de la marge et non du contenu justifié.

0
David de Castro

Screenshot

Accédez à l'élément de contrôle et vérifiez si .justify-content-center est répertorié en tant que nom de classe sous l'onglet 'Styles'. Si ce n'est pas le cas, vous utilisez probablement bootstrap v3) sans justification-contenu-centre.

Si oui, veuillez mettre à jour bootstrap, a travaillé pour moi.

0
Madusara Liyanage