justifier-le contenu de la propriété ne fonctionne pas

J'ai un étrange problème que je vais avoir des ennuis avec. J'ai donc travaillé sur ce prototype html5 modèle qui utilise flexbox. Si j'ai été en cours d'exécution dans un léger problème. Je me suis essayé à un petit espace dans la barre latérale et la zone de contenu du modèle par l'application de la "justify-content" propriété de la div parent. Si ce n'est pas en ajoutant que l'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 l'un pouvait m'aider ce serait génial. Merci à l'avance!

Voici mon code 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 la corporation de css:

#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 morceau de mon code css relatifs à l'un des autres éléments de mon code html s'il vous plaît laissez-moi savoir et je serai heureux de l'ajouter dans la question.

  • Veuillez faire en sorte de ne pas clearfix ou pseudo code de l'élément
InformationsquelleAutor VEDA0095 | 2014-06-05
  1. 79

    justify-content seulement a un effet si il y a de l'espace libre sur après votre flex éléments ont fléchi pour absorber l'espace libre. Dans la plupart des/beaucoup de cas, il n'y aura pas d'espace libre à gauche, et en effet justify-content rien ne sera fait.

    Quelques exemples où il serait ont un effet:

    • si votre flex éléments sont tous inflexible (flex: none ou flex: 0 0 auto), et plus petit que le conteneur.

    • si votre flex éléments sont flexibles, MAIS ne peut pas se développer à absorber la totalité de l'espace libre, en raison d'un max-width sur chaque flexible éléments.

    Dans ces deux cas, justify-content serait en charge de la distribution de l'excédent de l'espace.

    Dans votre exemple, même si, vous avez flex éléments qui ont flex: 1 ou flex: 6 sans max-width limitation. Votre flexible éléments poussent à absorber la totalité de l'espace libre, et il n'y aura pas d'espace à gauche pour justify-content à faire n'importe quoi avec.

    • Très bien, merci. J'ai été en mesure de trouver une solution simple si. Je viens de rembourrage supplémentaire sur le côté gauche de l'article conteneur. Tout semble fonctionner parfaitement bien après.
    • Merci! La spécification de la largeur était la solution!
    • Si il y a du texte à l'intérieur de justify-content est utile quel que soit les limites signalées dans cette réponse.
    InformationsquelleAutor dholbert
  2. 16

    Cette réponse peut-être stupide, mais j'ai passé un peu de temps pour comprendre un problème similaire.

    Ce qui m'est arrivé je n'a pas ensemble display: flex pour le conteneur. Et bien sûr, justify-content ne fonctionnera pas sans cette propriété.

    • Et il y a moi qui a été mise en justify-content à l'élément
    • merci, il y a moi qui n'a jamais ajouté display: flex pour le parent, parce que j'ai inspecté les enfants et vu qu'ils ont déjà display: flex pour les petits-enfants
    InformationsquelleAutor technophyle
  3. 6

    J'avais une autre question qui rousseurs moi pour un moment lors de la thématisation code existant à partir d'un CMS. Je voulais utiliser flexbox avec justify-content:space-between mais la gauche et la droite les éléments n'étaient pas rincer.

    Dans ce système, les éléments ont été introduites en bourse et le conteneur a un :before et/ou un :after pour effacer les flotteurs au début ou à la fin. Donc, la définition de ces sournois :before et :after éléments de display:none a fait le tour.

    InformationsquelleAutor Andyg8