Die Eigenschaft "Inhalt rechtfertigen" funktioniert nicht

73

Ich habe ein seltsames Problem, mit dem ich Probleme habe. Also habe ich an diesem Prototyp einer HTML5-Vorlage gearbeitet, die Flexbox verwendet. Obwohl ich auf ein kleines Problem gestoßen bin. Ich versuche, einen kleinen Abstand zur Seitenleiste und zum Inhaltsbereich der Vorlage zu schaffen, indem ich die Eigenschaft "Inhalt rechtfertigen" auf das übergeordnete div anwende. Der Abstand zwischen der Seitenleiste und dem Inhaltsbereich wird jedoch nicht hinzugefügt. Ich bin mir nicht sicher, was ich falsch mache. Wenn mir jemand helfen könnte, wäre das großartig. Danke im Voraus!

Hier ist mein 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>

Hier ist das relevante 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;
}

HINWEIS: Wenn jemand einen anderen Teil meines CSS-Codes benötigt, der sich auf andere Elemente meines HTML-Codes bezieht, lassen Sie es mich bitte wissen, und ich werde ihn gerne auch in die Frage aufnehmen.

css flexbox spacing article VEDA0095
quelle
1
Bitte stellen Sie sicher, dass es keinen Clearfix oder Pseudocode auf dem Element gibt
Mo.
TL; DR: Werde deine los flex-grow: 1;und lass justify-contentes sein Ding machen.
Andrew

Antworten:

134

justify-content Dies wirkt sich nur aus , wenn nach dem Biegen Ihrer Flex-Elemente noch Platz übrig ist, um den freien Speicherplatz zu absorbieren. In den meisten / vielen Fällen ist kein freier Speicherplatz mehr vorhanden und es wird tatsächlich justify-contentnichts unternommen.

Einige Beispiele , wo es würde eine Wirkung haben:

  • wenn Ihre Flex-Artikel alle unflexibel ( flex: noneoder flex: 0 0 auto) und kleiner als der Behälter sind.

  • Wenn Ihre flexiblen Elemente flexibel sind, kann ABER aufgrund eines max-widthauf jedem der flexiblen Elemente nicht wachsen, um den gesamten freien Speicherplatz zu absorbieren .

In beiden Fällen justify-contentwäre er für die Verteilung des überschüssigen Raums verantwortlich.

In Ihrem Beispiel haben Sie jedoch flexible Elemente mit flex: 1oder flex: 6ohne max-widthEinschränkung. Ihre flexiblen Gegenstände wachsen, um den gesamten freien Speicherplatz zu absorbieren, und es bleibt kein Speicherplatz mehr, justify-contentmit dem Sie etwas anfangen können.

dholbert
quelle
2
Gut, danke. Ich konnte jedoch eine einfache Lösung finden. Ich habe gerade die linke Seite des Artikelbehälters aufgefüllt. Danach scheint alles einwandfrei zu funktionieren.
VEDA0095
4
Vielen Dank! Die Angabe der Breite war die Lösung!
Crashalot
Wenn sich Text darin justify-contentbefindet, ist dies unabhängig von den in dieser Antwort genannten Einschränkungen hilfreich.
Bart Calixto
Vielen Dank sehr hilfreich zu wissen, "wenn noch Platz übrig ist"
klewis
38

Diese Antwort mag dumm sein, aber ich habe einige Zeit damit verbracht, es herauszufinden.

Was mir passiert ist, war ich nicht eingestellt display: flexauf den Behälter. Und natürlich justify-contentfunktioniert es nicht ohne einen Container mit dieser Eigenschaft.

technophyle
quelle
14
Und da bin ich, der sich justify-contentauf den Gegenstand eingestellt hat
Abhi
@Abhi, danke, da bin ich, der dem Elternteil nie display: flex hinzugefügt hat, weil ich die Kinder inspiziert habe und gesehen habe, dass sie bereits anzeigen: flex für die Enkelkinder
PhoenixB
13

Ich hatte ein weiteres Problem, das mich eine Weile beschäftigte, als ich vorhandenen Code von einem CMS thematisierte. Ich wollte Flexbox verwenden, justify-content:space-betweenaber das linke und das rechte Element waren nicht bündig.

In diesem System wurden die Gegenstände geschwommen und der Behälter hatte am Anfang oder Ende ein :beforeund / oder ein :afterzu löschendes Schwimmen. Also haben diese Sneaky :beforeund :afterElemente display:noneden Trick gemacht.

Andyg8
quelle
3

Ich hatte viele Probleme mit dem Rechtfertigungsinhalt und stellte fest, dass das Problem "margin: 0 auto" war.

Der automatische Teil überschreibt den Ausrichtungsinhalt, sodass er immer entsprechend dem Rand und nicht nach dem Ausrichtungsinhalt angezeigt wird.

David de Castro
quelle
danke, margin-right: auto;ist wichtig, wenn justify-content: space-between;als Flex-Gitter verwendet
RaymondM
-7

Bildschirmfoto

Gehen Sie zum Element inspizieren und überprüfen Sie, ob .justify-content-center als Klassenname auf der Registerkarte "Stile" aufgeführt ist. Wenn nicht, verwenden Sie wahrscheinlich Bootstrap v3, in dem das Rechtfertigungs-Inhaltscenter nicht definiert ist.

Wenn ja, bitte Bootstrap aktualisieren, hat bei mir funktioniert.

Madusara Liyanage
quelle