“justify-content"属性不起作用 [英] The 'justify-content' property isn't working

查看：53
本文介绍了“justify-content"属性不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我遇到了一个奇怪的问题.我一直在研究这个使用 Flexbox 的 HTML5 原型模板.虽然我遇到了一个小问题.

我试图通过应用justify-content"来为模板的侧边栏和内容区域留出一个小空间.属性给父 div.虽然它没有在侧边栏和内容区域之间添加那个空间.我不确定我做错了什么.所以如果有人能帮助我那就太好了.

这是我的 HTML 内容:

<html lang="en"><头><元字符集=utf-8"><元名称=视口"内容=宽度=设备宽度"><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=样式表"类型=文本/css"；媒体=屏幕"/><title>欢迎使用我的域</title><身体><标题><h1>这是一个占位符 <br/>对于标题</标题><nav class="main"><div class="mobilmenu"></div><ul><li><a href=#">首页</a></li><li><a href=#">视频</a></li><li><a href=#">图片</a></li><li><a href=#">音频</a></li><li><a href=#">其他作品</a></li><li><a href=#">关于我</a></li><li><a href=#">联系我</a></li></nav><div id="包装器"><文章类=内容主"><部分><h2>标题在这里...</h2><time datetime="2014-05-21T02:43:00">官方发布于 5 月 21 日<sup>st</sup>凌晨 2:35</时间><p>内容将转到此处...</p></节></文章><旁边><p>更多内容即将...</p></一边>

<页脚><div class="版权"><span>2014 年保留所有权利.</span>

<nav class="foot"><ul><li><a href=#">首页</a></li><li><a href=#">视频</a></li><li><a href=#">图片</a></li><li><a href=#">音频</a></li><li><a href=#">其他作品</a></li><li><a href=#">关于我</a></li><li><a href=#">联系我</a></li></nav></页脚>

这是相关的 CSS:

#wrapper{显示:弹性；弹性方向:行；justify-content:空间环绕；flex-flow:行包装；弹性:1 100%；宽度:92.5%；对齐自我:居中；填充顶部:3.5em；填充底部:2.5em；边距:0；}#wrapper article.content-main{弹性:6；订单:2；}#wrapper article.content-main 部分{背景颜色:rgba(149, 21, 130, 0.61);边框:2px 实心 #c31cd9;填充:0.9em；}#wrapper 放在一边{弹性:1；填充:0.4em；背景颜色:rgba(17, 208, 208, 0.56);边框:2px 实心 #15d0c3；位置:粘性；}

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

解决方案

justify-content 只有在你的 flex 项目已经弯曲到吸收自由空间.在大多数/许多情况下，不会有任何可用空间，实际上 justify-content 将什么也不做.

一些会影响的例子:

  • 如果你的弹性项目都是不灵活的(flex: none 或 flex: 0 0 auto)，并且小于容器.

  • 如果您的弹性项目是灵活的，但由于每个弹性项目上的max-width，因此无法增长以吸收所有可用空间.

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

不过，在您的示例中，您有具有 flex: 1 或 flex: 6 且没有 max-width 限制的弹性项目.您的灵活项目将增长以吸收所有可用空间，并且将没有空间供 justify-content 使用.

I have an odd issue that I'm having trouble with. I've been working on this prototype HTML5 template that uses Flexbox. Though I've been running into one slight problem.

I'm trying to a small space to the sidebar and content area of the template by applying the "justify-content" property to the parent div. Though it's not adding that space between the sidebar and content area. I'm not sure what it is that I'm doing wrong. So if any could help me that would be great.

Here's my HTML content:

<!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>

Here's the relevant 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;
}

NOTE: If anyone needs any other piece of my CSS code relating to any of other elements of my html please let me know, and I will happily add it into the question as well.

解决方案

justify-content only has an effect if there's space left over after your flex items have flexed to absorb the free space. In most/many cases, there won't be any free space left, and indeed justify-content will do nothing.

Some examples where it would have an effect:

  • if your flex items are all inflexible (flex: none or flex: 0 0 auto), and smaller than the container.

  • if your flex items are flexible, BUT can't grow to absorb all the free space, due to a max-width on each of the flexible items.

In both of those cases, justify-content would be in charge of distributing the excess space.

In your example, though, you have flex items that have flex: 1 or flex: 6 with no max-width limitation. Your flexible items will grow to absorb all of the free space, and there will be no space left for justify-content to do anything with.

这篇关于“justify-content"属性不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆