css - div - La propiedad justify-content no está funcionando
flex direction (3)
Esta respuesta puede ser estúpida, pero dediqué un tiempo a descubrir un problema similar.
Lo que me sucedió fue que no configuré la display: flex al contenedor. Y, por supuesto, justify-content no funcionará sin esa propiedad.
Tengo un problema extraño con el que estoy teniendo problemas. Así que he estado trabajando en esta plantilla html5 prototipo que usa flexbox. Aunque me he estado topando con un pequeño problema. Estoy intentando colocar un pequeño espacio en la barra lateral y en el área de contenido de la plantilla aplicando la propiedad "justify-content" a la división principal Aunque no es agregar ese espacio entre la barra lateral y el área de contenido. No estoy seguro de qué es lo que estoy haciendo mal. Así que si alguien pudiera ayudarme sería genial. ¡Gracias por adelantado!
Aquí está mi 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>
Aquí está el css relevante:
#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;
}
NOTA: Si alguien necesita cualquier otra parte de mi código css relacionada con cualquiera de los otros elementos de mi html, hágamelo saber, y con gusto lo agregaré a la pregunta.
Tuve un problema adicional que me engañó por un tiempo al crear un tema del código existente de un CMS. Quería usar flexbox con justify justify-content:space-between pero los elementos izquierdo y derecho no estaban al ras.
En ese sistema, los elementos fueron flotados y el contenedor tenía un :before y / o un :after para despejar flotadores al principio o al final. Así que configura esos elementos furtivos :before y :after elementos a display:none hizo el truco.
justify-content solo tiene efecto si queda espacio después de que los elementos flexibles se hayan flexionado para absorber el espacio libre. En la mayoría de los casos, no quedará espacio libre y, de hecho justify-content no hará nada.
Algunos ejemplos en los que tendría un efecto:
si sus elementos de flexión son todos inflexibles (
flex: noneoflex: 0 0 auto), y más pequeños que el contenedor.Si sus elementos flexibles son flexibles, PERO no puede crecer para absorber todo el espacio libre, debido al
max-widthen cada uno de los elementos flexibles.
En ambos casos, justify-content se encargaría de distribuir el espacio sobrante.
Sin embargo, en su ejemplo, tiene elementos flexibles que tienen flex: 1 o flex: 6 sin limitación de max-width . Sus elementos flexibles crecerán para absorber todo el espacio libre, y no quedará espacio para que justify-content de justify-content haga nada.