为什么我的 justify-content 属性不起作用？

问题描述 投票：0回答：12

我试图通过将“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 flexbox spacing
12个回答
213
投票

justify-content
only 在弹性项目弯曲以吸收可用空间后仍有剩余空间时才有效。在大多数/许多情况下，不会剩下任何可用空间，并且实际上 
justify-content
不会执行任何操作。

它会产生效果的一些例子：

  • 如果您的弹性项目都是不灵活的（

    flex: none
    或
    flex: 0 0 auto
    ），并且小于容器。

  • 如果您的弹性项目是灵活的，但由于每个灵活项目上都有一个

    max-width
    ，因此无法增长以吸收所有可用空间。

在这两种情况下，

justify-content
将负责分配多余的空间。

但是，在您的示例中，您的弹性项目具有 

flex: 1
或 
flex: 6
，没有 
max-width
限制。您的灵活物品将会增长以吸收所有可用空间，并且将没有空间可供 
justify-content
做任何事情。

67
投票

我发生的事情是我没有在容器（具有 

display: flex
属性的元素）上设置 
justify-content
。当然，如果没有该属性，
justify-content
将无法工作。

17
投票

在对 CMS 中的现有代码进行主题化时，我还遇到了一个让我困惑了一段时间的问题。我想将 Flexbox 与 

justify-content:space-between
一起使用，但左右元素不齐平。

在该系统中，物品是浮动的，并且容器具有 

:before
和/或 
:after
以在开始或结束时清除浮动。因此，将那些偷偷摸摸的 
:before
和 
:after
元素设置为 
display:none
就可以了。

14
投票

我在 

justify-content
方面遇到了很多问题，我发现问题是 
margin: 0 auto

auto
部分覆盖
justify-content
，因此它始终根据边距而不是
justify-content
显示。

4
投票

有时

justify-content
并不是您应该使用的属性。当您的 
flex-direction
为 
column
时尤其如此，这使得主轴垂直 (y)。你应该尝试一下 
align-item
属性，这可能就是魅力所在。

2
投票

应该有更多空间供

justify-content
使用。

您可以使用 

flex-basis
并给出一个值，例如 40%。

就这么简单

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

始终确保为容器指定 

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

0
投票

如果，

justify-content: space-between;

无法正常工作，请确保：

  display: flex;
  flex-direction: column;

然后尝试

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

如果将高度设置为固定值（100px 或 30rem 等），而不是百分比或可用填充，则可以解决此问题。我不认为

justify-content: space-between
喜欢百分比（高度：100%）

0
投票

我遇到了类似的问题，第一个和最后一个图像都粘在两端，中间一个对齐为之间的空间，所以我在之前和之后使用了一个技巧，现在所有图像都按预期工作，请检查下面的代码以了解详细信息。

HTML

<div className="flexContainer">
  <img src="image1.jpg" alt="..." />
  <img src="image2.jpg" alt="..." />
  <img src="image3.jpg" alt="..." />
</div>

我的CSS

.flexContainer {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.flexContainer::before,
.flexContainer::after {
   content: "";
}
0
投票

如果您发现有明显的间距，但元素不会随

justify-content: space-around
移动，添加
width: 100%
，因为div/容器可以限制为每个元素的宽度，而不是其完整宽度。

-12
投票

转到检查元素并检查 .justify-content-center 是否在“样式”选项卡下列为类名称。如果没有，您可能使用的是 bootstrap v3，其中未定义 justify-content-center。

如果是这样，请更新引导程序，对我有用。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.