Właściwość justify-content nie działa
Mam dziwny problem, z którym mam problem. Pracowałem więc nad tym prototypowym szablonem html5, który wykorzystuje flexbox. Jednak napotkałem jeden mały problem. Próbuję przydzielić trochę miejsca na pasek boczny i obszar zawartości szablonu, stosując właściwość „justify-content” do nadrzędnego elementu div. Nie dodaje jednak tak dużej przestrzeni między paskiem bocznym a obszarem zawartości. Nie wiem, co właściwie robię źle. Byłoby wspaniale, gdyby ktoś mógł mi pomóc. Z góry dziękuję!
Oto mój 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>
[b]This is a placeholder
for header[/b]>
</header>
<nav class="main">
<div class="mobilmenu">
[list]
[*][url="#">Home[/url][/*]
[*][url="#">Video[/url][/*]
[*][url="#">Pictures[/url][/*]
[*][url="#">Audio[/url][/*]
[*][url="#">Other Work[/url][/*]
[*][url="#">About Me[/url][/*]
[*][url="#">Contact Me[/url][/*]
[/list]
</nav>
<div id="wrapper">
<article class="content-main">
<section>
[b]Heading goes here...[/b]>
<time datetime="2014-05-21T02:43:00">Officialy Posted On May 21<sup>st</sup> 2:35 A.M.</time>
Content will go here... </section>
</article>
<aside>
More content soon... </aside>
<footer>
<div class="copyright">
<span>All rights reserved 2014.</span>
<nav class="foot">
[list]
[*][url="#">Home[/url][/*]
[*][url="#">Video[/url][/*]
[*][url="#">Pictures[/url][/*]
[*][url="#">Audio[/url][/*]
[*][url="#">Other Work[/url][/*]
[*][url="#">About Me[/url][/*]
[*][url="#">Contact Me[/url][/*]
[/list]
</nav>
</footer>
</body>
</html>
Oto odpowiedni 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;
}
UWAGA: jeśli ktoś potrzebuje innego fragmentu mojego kodu css związanego z jakimkolwiek innym elementem mojego kodu html, daj mi znać, a chętnie dodam go do tego pytania.
Nie znaleziono powiązanych wyników
Zaproszony:
Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się
5 odpowiedzi
Anonimowy użytkownik
Potwierdzenie od:
tylko
w przypadku, gdy po zgięciu twoich zgięć pozostało miejsce, aby wchłonąć wolną przestrzeń. W większości/wielu przypadkach nie będzie wolnego miejsca i naprawdęnic nie da.
Oto kilka przykładów
będzie
mieć efekt:
W obu tych przypadkachbędzie odpowiedzialne za przydzielanie nadmiaru miejsca.
Jednak w Twoim przykładzie masz elementy flex, które mająlubbez ograniczenia. Twoje elementy elastyczne będą rosły, aby wchłonąć całą wolną przestrzeń, nie pozostawiając miejsca na działanie.
Anonimowy użytkownik
Potwierdzenie od:
To, co mi się przytrafiło, to to, że ja
nie
ustawna kontener. Oczywiścienie będzie działać bez kontenera z tą właściwością.
Anonimowy użytkownik
Potwierdzenie od:
W tym systemie elementy pływały, a kontener miałi/lub, aby wyczyścić elementy pływające na początku lub na końcu. Więc ustawienie tych okropnych elementówinazałatwiło sprawę.
Anonimowy użytkownik
Potwierdzenie od:
Autopart zastępuje justify-content, więc zawsze wyświetla się zgodnie z marginesem, a nie justify-content.
Anonimowy użytkownik
Potwierdzenie od:
Jeśli tak, zaktualizuj bootstrap, który działał dla mnie.