Question

我有一个奇怪的问题，我遇到了麻烦。所以我一直在研究使用flexbox的原型html5模板。虽然我遇到了一个小问题。我通过应用＆＃34; justify-content＆＃34;来尝试在模板的侧边栏和内容区域占用一小块空间。属于父div的属性。虽然它没有在侧边栏和内容区域之间添加空格。我不确定我做错了什么。所以，如果有任何可以帮助我，这将是伟大的。提前谢谢！

这是我的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>

这是相关的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;
}

注意：如果有人需要我的任何其他与我的HTML的任何其他元素相关的css代码，请告诉我，我也很乐意将其添加到问题中。

Answer 1

justify-content 只有才会生效，如果在弹性项目弯曲以吸收可用空间后仍留有空间。在大多数情况下，不会留下任何可用空间，而且justify-content确实无能为力。

会产生影响的一些例子：

如果您的弹性项目不灵活（flex: none或flex: 0 0 auto）且小于容器。
如果您的柔性物品具有弹性，但由于每个弹性物品上都有max-width，因此无法吸收所有可用空间。

在这两种情况下，justify-content将负责分配多余的空间。

但是，在您的示例中，您的Flex项目包含flex: 1或flex: 6且没有max-width限制。您的灵活项目将会增长以吸收所有可用空间，justify-content将无法留出任何空间。

Answer 2

这个答案可能很愚蠢，但我花了一些时间来找出类似的问题。

我发生的事情是没有将display: flex设置为容器。当然，如果没有该属性，justify-content将无效。

Answer 3

我还有一个问题，当我从CMS中获取现有代码时，我感到困扰了一段时间。我想将flexbox与justify-content:space-between一起使用，但左右元素不是齐平的。

在该系统中，项目浮动并且容器具有:before和/或:after以清除开始或结束时的浮动。因此，将那些偷偷摸摸的:before和:after元素设置为display:none就可以了。

Answer 4

我在辩解内容方面存在很多问题，我发现问题是“保证金：0自动”

自动零件会覆盖对齐内容，因此它始终根据边距而不是对齐内容显示。

Answer 5

转到检查元素，检查.justify-content-center是否在“样式”选项卡下作为类名列出。如果不是，则可能是您使用的引导程序v3中未定义justify-content-center。

如果是这样，请更新引导程序，为我工作。

理由 - 内容属性不起作用

5 个答案: