css 为什么我的理由内容属性不起作用？

3yhwsihp 于 2023-03-05 发布在其他

关注(0)|答案(9)|浏览(136)

我试图通过将"justify-content"属性应用于父div来在模板的侧边栏和内容区域之间添加一些空间，但它没有在侧边栏和内容区域之间添加空间，我不确定我做错了什么。

#wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-flow: row wrap;
    flex: 1 100%;
    width:92.5%;
    align-self: center;
    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;
}

<body>
    <header>
        <h1>This is a placeholder <br />
            for header</h1>
    </header>
    <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>
</body>

css

来源：https://stackoverflow.com/questions/24052569/why-isnt-my-justify-content-property-working

9条答案

按热度按时间

khbbv19g1#

justify-content * 仅 * 在您的flex项目弯曲以吸收可用空间后仍有剩余空间时有效。在大多数/许多情况下，不会有任何可用空间剩余，实际上justify-content将不起作用。
它 * 会 * 产生影响的一些例子：

如果您的弹性项目都是不可弯曲的（flex: none或flex: 0 0 auto），并且小于容器。
如果您的灵活项目是灵活的，但由于每个灵活项目上的max-width而无法增长以吸收所有可用空间。

在这两种情况下，justify-content将负责分配多余的空间。
但是，在您的示例中，您有flex: 1或flex: 6的灵活项目，而没有max-width限制，您的灵活项目将增长到吸收所有可用空间，并且将没有空间留给justify-content来做任何事情。

赞(0）回复(0）举报 2023-03-05

v8wbuo2f2#

发生在我身上的是我没有在容器上设置display: flex（具有justify-content属性的元素）。当然，没有该属性，justify-content将无法工作。您想要间隔开的项需要是“flex items”，或具有display: flex和justify-content: space-around的元素的直接后代。

赞(0）回复(0）举报 2023-03-05

2j4z5cfb3#

当从CMS主题化现有代码时，我有一个更进一步的问题困扰了我一段时间。我想使用带有justify-content:space-between的flexbox，但是左和右元素不齐平。
在那个系统中，元素是浮动的，容器有一个:before和/或:after来清除开始或结束时的浮动，所以将那些鬼鬼祟祟的:before和:after元素设置为display:none就可以了。

赞(0）回复(0）举报 2023-03-05

bxgwgixi4#

我在使用justify-content时遇到了很多问题，我发现问题出在margin: 0 auto上
auto部分覆盖justify-content，因此其始终根据边距而不是justify-content显示。

赞(0）回复(0）举报 2023-03-05

axkjgtzd5#

有时候justify-content并不是你应该使用的属性。当你的flex-direction是column时尤其如此，它使主轴垂直（y）。你应该试试align-item属性，这可能是它的魅力所在。

赞(0）回复(0）举报 2023-03-05

ctzwtxfj6#

应该有更多空间供justify-content使用。
可以使用flex-basis并给出一个值，例如40%。
就这么简单

.content-main{
  flex-basis: 40%;
}
aside{
  flex-basis: 40px;
}

赞(0）回复(0）举报 2023-03-05

jv4diomz7#

始终确保为容器指定width和height+为容器内的元素设置padding : 0 (or auto) ;和margin : 0 (or auto) ;可能也有帮助

赞(0）回复(0）举报 2023-03-05

cx6n0qe38#

如果，

justify-content: space-between;

无法正常工作，请确保：

display: flex;
  flex-direction: column;

然后尝试

display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;

赞(0）回复(0）举报 2023-03-05

oo7oh9g99#

转到inspect element并检查.justify-content-center是否作为类名列在“样式”选项卡下。如果没有，可能是因为您使用的是bootstrap v3，其中未定义justify-content-center。
如果是这样，请更新 Bootstrap ，为我工作。

赞(0）回复(0）举报 2023-03-05

我来回答

css 为什么我的理由内容属性不起作用？

9条答案

相关问题

热门标签

最新问答