首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >“justify-content”属性不起作用

“justify-content”属性不起作用
EN

Stack Overflow用户
提问于 2014-06-05 13:52:47
回答 3查看 209.1K关注 0票数 93

我有一个奇怪的问题,我遇到了麻烦。我一直在开发这个使用Flexbox的原型HTML5模板。不过,我遇到了一个小问题。

我试图通过将"justify- content“属性应用于父div来为模板的侧边栏和内容区域留出一小块空间。虽然它没有在侧边栏和内容区域之间添加空间。我不确定我到底做错了什么。因此,如果有任何可以帮助我,那将是很好的。

下面是我的HTML内容:

代码语言:javascript
复制
<!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:

代码语言:javascript
复制
#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;
}

注意:如果任何人需要我的CSS代码中与我的html的任何其他元素相关的任何其他部分,请让我知道,我也会很高兴地将其添加到问题中。

EN

回答 3

Stack Overflow用户

发布于 2018-05-28 22:10:24

当从CMS中对现有代码进行主题化时,我还有一个问题困扰了我一段时间。我想在justify-content:space-between中使用flexbox,但是left和right元素并不对齐。

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

票数 13
EN

Stack Overflow用户

发布于 2019-08-20 03:24:14

我在justify content方面遇到了很多问题,我发现问题出在“差额:0自动”。

auto部分覆盖了对齐内容,因此它总是根据页边距而不是对齐内容显示。

票数 8
EN

Stack Overflow用户

发布于 2021-09-07 13:52:44

有时,justify-content不是您应该使用的属性。当您的flex-directioncolumn时尤其如此,这会使主轴垂直(y)。您应该尝试一下align-item属性,这可能是它的魅力所在。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/24052569

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档